Shopify themes, liquid, logos, and UX
Goodmorning everyone,
I have a question regarding the header of our website. (www.croom-sanitair.nl)
As you can see on mobile the white part below the logo in the header is too big.
Is there a way to make it end just below the logo so it's smaller?
Solved! Go to the solution
This is an accepted solution.
@sanderdame
Add this code in theme.scss or gem-page.css
@media (max-width: 767px)
{
#r-1634885432805 {
margin-top: -25px !important;
}
}
1. Go to Online Store->Theme->Edit code 2. Asset->/theme.scss.liquid ->paste below code at the bottom of the file.
@media screen and (max-width: 768px){
.site-header__logo img {
max-height: 45px !important;
margin-top: 5px !important;
margin-bottom: 5px !important;
}
}
@media screen and (max-width: 600px){
.site-header__logo img {
max-height: 45px !important;
margin-top: 5px !important;
margin-bottom: 5px !important;
}
}
add this code in theme.scss or theme.css
I'm sorry to say but the logo has only became smaller en the white part still the same, here is the screenshot:
(This is the same for both mentioned answers above)
i think you would like to remove this extra spacing.
Yes exactly but I can't find any way to do this! Searched everywhere in the code and in the product page.
This is an accepted solution.
@sanderdame
Add this code in theme.scss or gem-page.css
@media (max-width: 767px)
{
#r-1634885432805 {
margin-top: -25px !important;
}
}
PERFECT, IT WORKED! 🙂
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024