im trying to increase the mobile width of my site to compensate for a larger header logo.
see below for the mobile site preview
this is what it looks like on actual mobile if i zoom out a bit to view the header
ideally id like to have the mobile min width around 825px (header logo is 800)
ive tried following these instructions but they didnt change anything:
https://community.shopify.com/c/shopify-design/dawn-theme-make-full-width-on-mobile/td-p/1797166
thanks in advance for all your pro help
@DataEraser8732 , if you increase the width of the logo in the mobile layout it’ll definitely make your website bad.
better if you set the logo as per the screenshot. logo in mobile should be around 120px to 140px max.
i agree, but i dont know how to make the mobile logo smaller without affecting the desktop site logo with then becomes tiny.
is there a mobile specific logo i can implement in the header?
@DataEraser8732 , Could you please share your store URL? I’ll check and guide you how to add the mobile-specific CSS to manage the width of the logo.
REDACTED
awesome thank you!
Please add the below line of CSS code at the end of your base.css file.
@media(max-width:767px){
.header .header__heading-logo{
max-width:200px !important;
}
}
youre fantastic