csswordpresswordpress-thesis-theme

Unwanted CSS Site Padding in Tablet & Mobile

I created this site off of a PSD, all relatively elementary CSS. I have unwanted outside padding on a mobile device AND a tablet. I want the left and right edges of the site to be flush with the edges of the browser. Its about 20px of unwanted padding.

Please see my dev site: http://america.82ndmedia.com/

I have tested removing the "margin: 0 auto" of the container div and it fixes it... however I need that for it to function on a desktop. 

.container {
width: $w_total;
margin: 0 auto;
}

Any tips would be greatly appreciated. Thank you!

Solution

  • This is being caused by the rule:

    @media (max-width: 450px) {
   .header, .columns > .sidebar, .post_box, .prev_next, .comments_intro,
   .comment, .comment_nav, #commentform, .comment_form_title, .footer {
       padding-right: 13px;
       padding-left: 13px;
}

    Either remove or override this rule somehow.