Hi, on mobile view at the moment the logo is too small and crosses over the search/menu/cart icons. I’d like to increase the header size (white space at the top) and centre align the logo/make it bigger. I think it the logo would need to sit at the bottom of the header, potentially with some padding at the top so it doesn’t interfere with the 3x icons and will effectively sit below it and center? Wondering if anyone knows some CSS wizardry for this? Screenshot and website provided. Thank you
Sorry forgot to say, because the logo is quite wide it probably needs to stretch fullwidth on mobile. Cheers!
Hi,
Please try the following in Quick CSS under Enfold->General Styling:
@media only screen and (max-width: 767px) {
.responsive #top .logo {
width: 100%;
}
.logo a {
max-height: 120px;
height: 120px;
}
.responsive .logo img {
display: table;
margin: 0 auto !important;
}
}
Best regards,
Rikard
Thank you Rikard. I entered the code and flushed cache but nothing has changed sorry :(
Hi,
I can see the changes on your site. Could you try to explain your intentions a bit further please?
Best regards,
Rikard
Thanks Rikard it’s showing now. Thank you! What would be the best way to increase the size of the logo more with that code? Thanks again.
Hi lfs360,
Just adjust height and max-height value in Rikard’s code.
Hope it helps.
Best regards,
Nikko
Thank you both. I have managed to make it larger but is there a way to stretch it (nearly) fullwidth? The smaller writing is still quite small to read on mobile.