How do i make my header look better on tablet view? (Responsive coding)

Store Design
, ,
1

Here is my store:

https://try-wonder-boutique.myshopify.com/

Password:

wonderboutique

Hello, my header is a bit messed up on tablet view. The menu items are not in one row and the header icons are everywhere. How do I fix this?

I’ll vote for you, thank you so much!

webtablet33.PNG
webtablet33.PNG717×341 92.8 KB

2

hey if you add in kricustom.css after line number 33

@media only screen and (max-width: 1171px) and (min-width: 990px) {
.header__menu-item {
padding: 1.3rem!important;
}
}
3

Hello @kirstenlc5 ,

It’s GemPages support team and glad to support you today. I suggest you should reduce the logo’s size on tablet view. Please kindly follow the steps below.

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1673332229456.png
GemPages_0-1673332229456.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

4

Hi @kirstenlc5

Please follow these steps:

Go to Admin => Online Store => Theme => Edit Code => find the file kircustom.css and then insert the following code at the end of the file:

@media screen and (min-width:990px) and (max-width:1284px){
    .list-menu {
        margin-left:2rem !important;
    }
    .header__heading-link{
        max-width: 240px !important;
    }
    .header__menu-item{
        padding: 1.85rem !important
    }
    .header__icon{    
        width: 4rem !important;
    }
    
}

I hope that it will work for your site.

5

Thank you so much