CODEWITHSUNDEEP
csswordpressresponsive-designsmartphone
Thibaud Clement
Thibaud Clement

Reputation: 6897

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.

Upvotes: 0

Views: 51

Answers (2)

Andrei Volgin
Andrei Volgin

Reputation: 41089

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; 
   }
}

Upvotes: 1

doublesharp
doublesharp

Reputation: 27599

Your @media code is missing some curly braces ({ and }), and you need to use max-width, not min-width. I typically add @media handheld to my mobile CSS as well.

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

Upvotes: 0

Related Questions