Archived topic
Equal length columns and mobile sidebar behavior
1 reply · Started by Tim on December 11, 2018
The code
.site-content {
display: flex;
}
Causes the sidebar to merge with the main content on mobile devices. Is there a solution to separate them in mobile view and keep equal columns? sidebar should be below content on mobile. The web page I'm needing assistance with is https://www.dentaldesignsolutions.com/about-stone-lodge-dental/. Any other suggestions would be welcomed.
Hi there,
you can set CSS exclusively to different screen sizes use @media queries like so:
@media (min-width: 768px) {
.site-content {
display: flex;
}
}
This will apply the flex to devices of tablet or greater size.