How can I adjust logo width for desktop and mobile on Dawn theme?

Store Design

Topic summary

A user wants to set different logo widths in the Dawn theme: 800px for desktop and 200px for mobile. They’ve been unsuccessful modifying the code themselves.

Solution provided:

  • Navigate to Online Store → Theme → Edit code
  • Open Assets → base.css
  • Add CSS code at the bottom of the file

The CSS targets:

  • Desktop: Sets .header__heading-logo to 800px width (with !important)
  • Mobile: Uses a media query @media (max-width: 749px) to set max-width to 200px

The original poster confirmed the solution worked by thanking the responder.

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

Currently, I have set the width of my header logo to 200px to ensure it functions properly on both mobile and desktop devices. However, I am wondering if it is feasible to adjust the width to 800px for desktop and 200px for mobile. Despite attempting to modify the code, I have not been successful in achieving this. Dawn theme

2

Hi @phillik ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:

Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file

.header__heading-logo {
 width: 800px !important;
 max-width: 100%;
}
@media (max-width: 749px) {
.header__heading-logo {
 max-width: 200px;
}
}

Hope my answer will help you.

Kate from PageFly Team

1 Like
3

Thanks for solution.