Mobile header size too large - Debut theme

Solved
orangegrove
Excursionist
12 1 0

My header for desktop is fine but for my mobile version it is cut off and the full width isn't displayed.

Please advise how I can correct this?  I have found another post but it was closed after getting too long.

Thanks so much

website is: www.orangegrove.co.nz

0 Likes
Akibhusen
Excursionist
195 36 68
apply below CSS from max-width:749
 
@media(max-width:749px){
.site-header__mobile-nav{
display:block;
}
.site-header__mobile-nav .grid--table>.grid__item{
display:block;
}
.logo-align--center .site-header__logo{
text-align:center;
font-size:36px;
padding-left:0;
}
}
 
After applying the above CSS your header will look like the below-given screenshot.
 
Akibhusen_0-1624003522288.png

 

Is it what you want?

Akibhusen Shekh | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
0 Likes
orangegrove
Excursionist
12 1 0

Yes but more narrow.  Thanks for your help, do you know width to specify?

0 Likes
orangegrove
Excursionist
12 1 0

Would I add the code to

theme.scss.liquid

0 Likes
orangegrove
Excursionist
12 1 0

This is an accepted solution.

Thanks, i have read up in Google and have made a slideshow for the image rather, it works much better

0 Likes