A user added a custom liquid section with their company logo above the standard header. The logo displays correctly on desktop but appears too large on mobile devices.
Solutions provided:
CSS approach: Add code to the base.css file targeting the specific section ID with max-width: 100% for images on mobile. A screenshot shows the mobile result after implementation.
Alternative method: Insert code into the theme.liquid file before the closing </head> tag.
Both solutions involve adding custom CSS to control image sizing specifically for mobile viewports. The discussion includes visual examples demonstrating the fix.
I have added a custom liquid header to my website just above the standard header. This custom liquid header contains our company logo, which looks perfect on desktop but is way too big on mobile.
How do I make this logo appear smaller on mobile?
Website is www.jimminymusicworld.com.au
Hi @Jimminy
Go to your Online store > Themes > Edit code > open theme.liquid file and add this code below before tag
Hello @Jimminy 
Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom
#shopify-section-sections--21267995066656__355fbc27-7a8a-45f8-a2a3-6d48e9d6bb52 img {
max-width: 100%;
}
The result on mobile
