Change margin and padding in media query
Hello,
I'd like to change the margin and padding of some subjects when someone visits my homepage with smartphones ortablets with the help of media queries. For example if the picture of the chef on your restaurant 2 page has a margin-top of -60px on desktop view, I would like to change that margin top to 0px on smartphone view, so that it doesnt overlap with the slider. When i inspect the code it says
<div class="wrap mcb-wrap one-second valign-top clearfix" style="margin-top:-60px">
I have literally no experience in CSS but I guess my only idea how to solve this issue by using the following code is totally wrong. But im not quite sure what else I could do to remove that margin on specific display widths.
@media only screen and (max-width: 767px)
{
.wrap, .mcb-wrap, .one-second, .valign-top, clearfix {margin-top:0}
}
Thanks in advance.
Comments
This css will target too many global classes and it will mess up your layout. Please send us a link to this page and point us to where this element is.
Also a good idea would be to add a custom class to the wrap that this picture is in. Just edit the wrap and add any name in the custom class field. Like so: http://prntscr.com/fc9dci