Can someone show me how to reduce the size of my header on web and mobile?
As well as reducing the size of the footer?
PW: LIGHTWEIGHT
Hello @TylerJ
Its Artzen Technologies! We will be happy to help you today.
Please remove the following CSS:-
.bottom–footer {
margin-top:60px;
}
This CSS you will find in footer.liquid file.
And for the header part reduce the height from 100vh to 55vh for mobile devices. The CSS is written in theme-index.min.css file.
Below is the CSS:-
@media screen and (max-width: 768px) {
.slideshow--full-screen {
height: 55vh;
}
}
Let me know if need further assistance
Regards,
Artzen Technologies
Hello @TylerJ
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->theme-min.index.css>Add this code at the bottom.
.bottom--footer {
margin-top: 0px !important;
}
Thanks for responding.
I tried both of these and none worked
Perfect, thanks! Would you mind taking a look at the header request above as well?
Could you take a look at the above header request for mobile and desktop?
Hello @TylerJ
Please send the right password so that I can provide a solution to you.
Password is KOL
Hello @TylerJ
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->theme-min.index.css>Add this code at the bottom.
.site-header .site-header__wrapper {
height: 3rem;
}
If the solution is helpful to you please accept and like the post.
Thank you! And how would I do that for mobile as well?
The header size doesnt stay the same if I go to another page on my site. How do I make the header the same size on every page?
Hey, just wanted to follow up on this!
Hello @TylerJ
Please add that css in the common file so that it applies for the all pages
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->theme-min.css>Add this code at the bottom.
.site-header .site-header__wrapper {
height: 3rem !important;
}
That didn’t work!
Wait, it worked once I put it into my custom.css file. How do i make the header the same on mobile
Just following up again on how to resize header on mobile for all pages