Search code examples
csswordpressresponsive-designsmartphone

WordPress blog responsiveness

Our company website was built with WordPress + Forest theme.

To get a full width blog, we had to remove the sidebar from the relevant templates and add the following custom CSS:

blog .site-content, .single .site-content  { width: 70%; max-width: 70%; margin: auto; }

This works fine on desktop and most of other devices and screen sizes.

However, the display is not very nice on smartphones, because of too big margins on both sides.

So, we tried to implement the following custom CSS to fix that, but it did not seem to alter the display on smartphones:

@media (min-width: 992px) .blog .site-content, .single .site-content  { width: 90%; max-width: 90%; margin: auto; }

Any idea of what is wrong here and how to fix it?

Thanks.

Solution

  • If you wanted smaller margins on smaller displays, it should have been

    @media (max-width: 992px) {
   .blog .site-content, .single .site-content { 
        width: 90%; max-width: 90%; margin: auto; 
   }
}