How to manually code mobile logo size in Dawn theme?

Store Design
, ,

Topic summary

A user needed to manually adjust the mobile logo size to approximately 220px in their Dawn theme, as the theme settings lacked this option. The base.css code was provided but appeared corrupted or reversed in the original post.

Solution provided:

  • Add custom CSS code to the theme.liquid file, placed above the </body> tag
  • Initial code attempt worked functionally but caused incorrect logo proportions (too tall)
  • Updated code was provided to fix the height/proportion issues

Outcome:
The second code snippet successfully resolved the issue. The user confirmed the solution worked correctly and expressed gratitude.

Note: The discussion included reversed/garbled text in several posts, but the core technical solution involved adding CSS media queries targeting mobile viewports to control logo dimensions.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I have been given a licensed site to use for a new market but I have no options for a mobile logo size in the theme settings so it needs to be coded manually.

Here is a snippet of the code in the base.css file. I need to make the width approx 220px.

Thanks in advance!

.header__heading-link:hover .h2 {
color: rgb(var(–color-foreground));
}

.header__heading-link .h2 {
line-height: 1;
color: rgba(var(–color-foreground), 0.75);
}

.header__heading-logo {
height: auto;
max-width: 100%;
}

.header__heading-logo-wrapper {
width: 100%;
display: inline-block;
transition: width 0.3s cubic-bezier(0.52, 0, 0.61, 0.99);
}

@media screen and (max-width: 989px) {
.header__heading,
.header__heading-link {
text-align: center;
}

.header–mobile-left .header__heading,
.header–mobile-left .header__heading-link {
text-align: left;
justify-self: start;
}

.header–mobile-left {
grid-template-columns: auto 2fr 1fr;
}
}

@media screen and (min-width: 990px) {
.header–middle-left .header__heading-link,
.header–top-left .header__heading-link {
margin-left: -0.75rem;
}

Thanks in advance!

2

Hey @Justinpwoods

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

thanks Moeed!

dycint is the access password!

4

Hey @Justinpwoods

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag.

RESULT:

Moeed_0-1712139263148.png
Moeed_0-1712139263148.png381×672 158 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

5

i’ll give that a go now! It looks like the logo isn’t looking right though?

6

Hey @Moeed ,

the concept works but the logo proportions aren’t correct… its now too high… any ideas?

7

Hey @Justinpwoods

Remove the previous code completely and add this new updated code with the same steps mentioned above, as it should look good for you then

RESULT:

Moeed_0-1712140068945.png
Moeed_0-1712140068945.png379×673 157 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

8

Amazing! it worked thank you so much.