New Shopify Certification now available: Liquid Storefronts for Theme Developers

Resize logo/header only on mobile

29 1 7


I looked for a solution on the forum, but didn't find it. I tried all the given solutions and none of the code had an effect on the site.

Is it possible to reduce the logo only on the mobile version? On the desktop version I have a perfectly matched logo and header size. On the mobile site the logo is too large, making the header take up too much of the screen. I use sticky header.

Dawn theme
pass; 123

Reply 1 (1)
524 132 107

Hi @ErnestoF 

This is Henry 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


@media (max-width: 767px){

img.header__heading-logo.motion-reduce {

    width: 50% !important;



Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.