A user’s logo appears too small on their Dawn theme website despite cropping whitespace. They’ve shared their site credentials and a logo preview image for troubleshooting.
Three solutions proposed:
• PageFly-Lucas: Add CSS to base.css file setting .header__heading-logo width to 150px using !important
• dmwwebartisan: Modify header.liquid file by changing the image size variable from section.settings.logo_width to a fixed value (e.g., 350px)
• INA_MSWEB: Similar CSS approach to PageFly-Lucas, but suggests 130px width for .header__heading-logo in base.css
All solutions involve either CSS customization in the theme’s base.css file or adjusting the Liquid template code in header.liquid. The CSS methods use !important to override default styling, while the Liquid approach changes the underlying image size parameter.
My Logo is appearing to small on my website, i tried cropping the white space but the logo still shows up small. Does anyone know why or how to resize it? Logo attached below. Website Link: The Car Flame Diffuser (07638e.myshopify.com)
Password: go2234
Hi @rvernon23
This is Lucas from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
.header__heading-logo {
width: 150px !important;
}
Hope that my solution works for you.
Best regards,
Lucas | PageFly
To fix the issue of the logo resolution, you can change the settings in header.liquid.
Assuming you want to change the image size to 350, you can do the following:
{%- assign image_size = section.settings.logo_width | append: ‘x’ -%}
to be changed to
{%- assign image_size = 350 | append: ‘x’ -%}
Hi @rvernon23
I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.
Please add this css in your bottom of the base.css file:
.header__heading-logo {width: 130px !important;}
Regards,
San
