Desktop/Mobile- different margin

Hey there dramapp,

How are you doing today?

You can achieve that by using media queries. You can find more info in one of the following links:

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Generally you should set the margin for your desktop resolutions something like this:

.yourclass {
margin-top: 100px;
}

And then add the margin for mobile version, something like this:

@media screen and (max-width: 600px) {
.yourclass {
margin-top: 50px;
}
}

By doing this you should have top margin 50px on resolutions 600px and less and 100px for resolutions above 600px.

If this doesn’t work could you please post link to your site and explain which margin you’re trying to change so I can take a look?

Hope this makes sense ??

Best regards,
Bojan

Hey Bojan, thank you very much for your tips, I will check those out, the site is https://dramapp.com and what I am trying to achieve is to make a smaller top margin on a mobile screens.

Best!

Hey again dramapp,

In this case you should only modify top margin on smaller resolutions. You can do that by adding the following CSS code in the style.css file of your child theme or if your theme doesn’t have custom CSS tab add it in your site using the following plugin:

https://www.ads-software.com/plugins/simple-custom-css

@media screen and (max-width: 768px) {
header#masthead {
margin-top: -70px;
}
}

This should leave your desktop margin as it is and only reduce it for the resolutions smaller then 768px.

Please let me know if this helps ??

Best regards,
Bojan

Hey Bojan,

thanks a lot! It worked ??

have a nice day!

Glad I could help! Have a great one as well ??

Cheers,
Bojan