Menu icon Foundation
How to remove body margin on small screens

Hi, Having a few problems removing the default site margins/padding for small screens. Any suggestions? Thanks.K

head

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            

         

app.css

@media only screen and (max-width: 40em) { 

    body {
	  margin:0px;	
      padding:0px;
    }
				
}
            

         

media queriesmarginsmall screens

Hi, Having a few problems removing the default site margins/padding for small screens. Any suggestions? Thanks.K

head

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            

         

app.css

@media only screen and (max-width: 40em) { 

    body {
	  margin:0px;	
      padding:0px;
    }
				
}
            

         

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

Columns have padding. You could instead target the columns and make the padding: 0

Karen Reid over 4 years ago

Thanks Rafi, that did it.

@media only screen and (max-width: 40em) { 

  .column, .columns {
    padding-left: 0rem;
    padding-right: 0rem;

  }
}