删除CSS中用于移动视图但不用于桌面视图的模板中的填充和边距

Question

I have downloaded a template for designing a website, which contains all HTML files and CSS. I want to add some custom padding and margins according to my needs for the desktop view. But I don't want those in mobile view because that is not getting responsive. The CSS file that came with the template already have @media screen defined. I tried adding

@media only screen and (max-width: 768px) {
    .row{
        margin:0;
        padding:0;
        }
}

but this does not work in css nor in the HTML file itself. How can I remove my forced padding and margins when opened in mobile view for ready made templates?

Answer 1

Try extending the padding and margin selector to include html , body and * :

@media only screen and (max-width: 768px) {
   *, html, body, .row {
      margin-left:0 !important;
      margin-right:0 !important;
      padding-left:0 !important;
      padding-right:0 !important;
   }
}

A common characteristic of browsers is that html and body will automatically insert margin spacing around your page if you do not specifically set it to 0 via CSS.

The CSS you provided is quite complex so it's not clear exactly what else is causing the issue, however by adding the above to the bottom of your CSS, this should remove horizontal padding/spacing throughout your page on mobile devices.