Menu icon Foundation
Different Margins for Different screen sizes

I would like to have small margins on a mobile, but larger margins on a desktop. So for the desktop 3 em is fine: $column-gutter: 3em; but for mobile I want small margins either side of the canvas 1em $column-gutter: 1em;

How is this possible? I tried writing a media query but it didnt work. Any help will be exteremly welcome.

thanks for your time.

cheers,
Rob

marginmedia query

I would like to have small margins on a mobile, but larger margins on a desktop. So for the desktop 3 em is fine: $column-gutter: 3em; but for mobile I want small margins either side of the canvas 1em $column-gutter: 1em;

How is this possible? I tried writing a media query but it didnt work. Any help will be exteremly welcome.

thanks for your time.

cheers,
Rob

Rafi Benkual almost 6 years ago

Can you post your code for the media query's you wrote? It should work.

@media screen and (max-width: 980px) {
body{
width:1000px;
margin:1em auto;
}
#content {
width: 700px;
}
.sidebar{
width:280px;
}
}

@media screen and (max-width: 640px) {
body{
width:850px;
margin:0 auto;
}
}

Robert Suckley almost 6 years ago

thanks for the reply, I will try something like the above, however just to note that your code is desktop first which goes against Foundations mobile first approach, also you shouldnt be using pixels in foundation for layout use ems.
cheers,
Rob