Solved

Margin Throughout The Entire Website

  • 13 October 2021
  • 3 replies
  • 11 views

I want to add margins throughout the website.
I added this code in the Site Settings, but it doesn’t apply any bottom margins.

body, html {
margin-left:1%;
margin-right:1%;
margin-bottom:1%;
margin-top:1%;
width:98%;
height:98%;
}

Also, can I add a breakpoint for the margins to disappear for mobile?

icon

Best answer by Simon Latham 13 October 2021, 15:07

View original

3 replies

Userlevel 5
Badge +1

The DOM order has html at the ‘top of the chain’, so you would need to put it before body. In fact, you can leave it out, totally.

Also, since margins all have the same value, you can just use margin: 1% to affect them all, instead of four separate declarations.

To get rid of the margins on mobile devices, it would be:

@media (max-width: 600px) {

   body {

      margin: 0;

   }

}

 

Note: if your theme has margins and dimensions ‘hardwired’ into it, you may need to add !important after each property/value to override, e.g. margin: 1% !important;

 

Hope that helps.

Dude thanks!
Everything works fine now!  :heart_eyes:

Userlevel 5
Badge +1

Dude thanks!
Everything works fine now!  :heart_eyes:

Excellent!

Reply