does anyone know how I can add padding between my header/logo and the page on the mobile version only- the desktop is how I want it. Thanks so much!
@smezstudios - can you please share this page link?
@smezstudios - please add this css to the very end of your base.css file and check, adjust number 70 as per the need
@media screen and (max-width:749px){
main#MainContent {margin-top: 70px;}
}
Hi @smezstudios ,
You can follow these steps to make the effect that you want
-
Open Online Store > Theme > Edit Code
-
Find and open the base.css (or theme.css, custom.css) file
-
Paste the code snippet below at the bottom of the file and hit save
@media screen and (max-width: 599px) {
#MainContent {
margin-top: 50px;
}
}
Hope this helps you solve the issue.
Please don’t forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!
Hi @smezstudios
I notice that your logo didnt show on mobile size.
Did you hide it intentionally?
This to add some space from the header and the heading page.
- From you Admin page, go to Online Store > Themes
- Select the theme you want to edit
- Under the Asset folder, open the main.css(base.css, style.css or theme.css)
- Then place the code below at the very bottom of the file.
@media only screen and (max-width: 599px){
.header > .header__heading-link {
display: contents;
}
h1.main-page-title.page-title, .shopify-policy__title {
padding-top: 40px;
}
}
- And Save.
Thank you so much!!!
Thanks so much!
No I am currently struggling with trying to make my logo black- because I made a transparent header on my landing page with white text the white text is now on all my pages! I need this to be black…
@smezstudios - add this css as well for black logo
@media screen and (max-width:749px){
.header__heading-logo{filter: invert(1);}
}
hmm when i do that it changes the logo colour to black on both the mobile landing page and the other pages, I ideally want all the header button/logo white on my landing page and black for all the other pages.Thanks so much