Layout not responding :(

[Ying]

My designer's away and I'm trying to get the headers and body to adjust when the screen size changes but I can't seem to find the right place to do this. I think it's in the CSS somewhere - would anyone be able to tell me what code I need to insert where? 

blog.secretsourcemarketing.com

Thank you!!

[Jsum · Accepted solution]

@Ying

Your .body-container-wrapper div is set to a width of 1100px and all of it's children are set to a width of 100% so basically 1100px.

You could do a media query:

@media (max-width: 1100px) {

     .body-container-wrapper {
             width: 800px
      }

}

@media (max-width: 800px) {

     .body-container-wrapper {
             width: 450px
      }

}

There are more graceful ways to do this but this is easiest and at least your content will be mobile friendly. just put this at the bottom of your css.

[Ying]

Thank you! It works beautifully!

[Jsum]

@Ying,

No problem. You should also check the console (ctl+shift+i or cmd+shift+i). You have a few errors being thrown. Just fyi.