Sidebars are essential for navigation on desktop screens but can become a nuisance on mobile devices if not handled correctly. A Responsive Sidebar strategy involves: keeping it sticky on the right for wide screens (desktop), narrowing it for tablets, and stacking it at the bottom (or hiding it behind a toggle) for mobile. This ensures the main content (the article) takes priority on small screens, while secondary widgets (Popular Posts, Categories) remain accessible after reading.
Toggle the view to see how the layout adapts:
Desktop View (Sidebar Right)
.page-layout {
display: grid;
grid-template-columns: 1fr 300px; /* Main | Sidebar */
gap: 40px;
max-width: 1200px;
margin: 0 auto;
}
/* Sidebar Styling */
.sidebar {
/* Desktop: Sticky */
position: sticky;
top: 20px;
align-self: start;
}@media (max-width: 900px) {
.page-layout {
grid-template-columns: 1fr; /* Single column stack */
}
.sidebar {
/* Mobile: Static (natural flow) */
position: static;
/* Move to bottom */
order: 1;
/* Optional: Change layout of widgets to grid */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
/* Ensure main content is first */
.main-content {
order: 0;
}
}@media (min-width: 901px) and (max-width: 1100px) {
.page-layout {
grid-template-columns: 1fr 240px; /* Narrower sidebar */
gap: 20px;
}
}