Question

I’ve seen many WordPress themes that adapt to mobile interfaces/smaller screens using only CSS. Any ideas on how it’s done?

For example, the theme Foghorn has a sidebar that disappears in a screen less than 750 px wide. I’ve looked at the code and I’m very sure that it is done with CSS.

I’d like to employ such a design in a website I’m making.

Thanks for any ideas!

Answer 1

You need to use media queries in your CSS.

Example:

@media screen and (max-width: 750px) {
    .someClass {
        display: block;
    }
}

Everything inside that @media block will be applied only if the screen width is 750px or smaller.

You can also do things like min-width or combining both.