Fix blog responsiveness and sidebar overlap#25
Conversation
This commit addresses a visual bug where the main blog content would hide behind the fixed sidebar on desktop viewports when the window width was reduced. The issue was caused by a CSS specificity conflict: the `.container` class (using `margin: auto`) was overriding the `.content` class (using `margin-left: 20rem`) when both were applied to the same element. Changes: - Implemented a robust fix using the `.content.container` selector in `assets/css/style.scss`. - Ensured the sidebar offset takes precedence on desktop viewports. - Maintained responsive centering for mobile viewports by overriding the combined selector in the appropriate media query. - Verified the fix across multiple breakpoints using Playwright screenshots.
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
This commit addresses a visual bug where the main blog content would hide behind the fixed sidebar on desktop viewports when the window width was reduced. The issue was caused by a CSS specificity conflict: the `.container` class (using `margin: auto`) was overriding the `.content` class (using `margin-left: 20rem`) when both were applied to the same element. Changes: - Implemented a robust fix using the `.content.container` selector in `assets/css/style.scss`. - Ensured the sidebar offset takes precedence on desktop viewports. - Maintained responsive centering for mobile viewports by overriding the combined selector in the appropriate media query. - Verified the fix across multiple breakpoints using Playwright screenshots.
1 participant
Fixed a responsiveness issue where the main content overlapped the fixed sidebar on narrower desktop viewports. The fix uses increased CSS specificity to ensure layout-critical margins take precedence over generic centering rules.
PR created automatically by Jules for task 17849131977456124135 started by @rockoder