Changed site width, now need to update mobile

[beautyfool]

Hi everyone!

I changed my blog "site.container" to a smaller width so my blog wouldn't be so spread out, however now the margin/padding in my mobile responsive is very large, is anyone able to help guide me on how to edit my mobile responsive so that it looks back to normal?

This is the only CSS I changed:

.site-container {
box-shadow: 0 0 5px #ddd;
margin: 40px auto;
max-width: 990px;***
padding: 20px 60px 100px;
}

*** I changed this from 1200px to 990px

My blog is blogforbeauty.com, in mobile phones now you can see the padding on the left and right side is very large, how do I make it normal again?

Thanks in advance!

Sincerely,
Renee

http://blogforbeauty.com

[Victor Font]

Mobile CSS is controlled by the media queries at the bottom of style.css. Most frequently, when you change something on the desktop, you also have to change corresponding code in the media queries.

Use the responsive design mode of your browser's built in inspection tool to pinpoint the CSS that needs changing.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[beautyfool]

Hi Victor, thanks for your response!

I did what you said and edited the corresponding code in the Media Queries to match, but nothing has changed. Am I doing it wrong? I added it to look as such:

@media only screen and (min-width: 930px) {

.site-container {
box-shadow: 0 0 5px #ddd;
margin: 40px auto;
max-width: 990px;
padding: 20px 60px 100px;
}
}

Thank you!

[Author]

Posts