How can I widen my logo on mobile devices using the Dawn theme?

Store Design
, , ,
1

How to expand the width of the logo on mobile devices and make it look similar to the desktop version, I’m using DAWN theme, please check out the pictures,

Mobile:

db640ff6-a0a4-45f2-8372-9b5b98d3743f.png
db640ff6-a0a4-45f2-8372-9b5b98d3743f.png397×735 131 KB

Desktop:

4r.png
4r.png1403×738 164 KB

URL: shopbreakthrough.com

2

Hello @thevergreenlana :waving_hand:

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.header__heading-logo-wrapper img {
    width: 200px;
    max-width: initial;
}

The result

Screenshot 2023-09-30 at 13.36.58.png
Screenshot 2023-09-30 at 13.36.58.png368×186 27.9 KB

Hope it helps!

3

Hi @thevergreenlana

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){

.header__heading-link.link.link–text.focus-inset {

PADDING: 0 !IMPORTANT;

}

.header__heading-logo {

height: 25px !important;

max-width: 100%;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly

4

Doesn’t work, it stretches out and looks very low resolution