Site logo

Archived topic

Equal length columns and mobile sidebar behavior

1 reply · Started by Tim on December 11, 2018

Viewing posts 1–2 of 2

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.

This archived topic is closed to new replies.