How to properly center the header in the mobile view? DAWN THEME

Store Design
, , ,
1

As you can see in the picture below:

Capture.PNG
Capture.PNG236×415 57.4 KB

The header logo is not properly centre aligned in the mobile view, How may I fix this?

URL: ABBASI (abbasigems.com)

Password: testingpage

Thank you, any help or sources are much appreciated!

2

Hi @justauser

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

PageFlyVictor_0-1674484091282.png
PageFlyVictor_0-1674484091282.png400×225 38.4 KB

Hope this answer helps.

Best regards,

Victor | PageFly

3

Hello @justauser

You can add code by following these steps to center Header in mobile

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media only screen and (max-width: 600px) { .header { display:grid !important; } }
1 Like
4

I didn’t find this solution to work but found an easier solution. enter this code in the Header Custom CSS:

.header__heading-logo {
margin-left: 30px;
}

you can adjust the px as you see fit. this does not effect the logo on desktop