How can I adjust the top margin on mobile view to fix overlap?

Store Design
, ,
1

hi!

my free shipping bar is overlapping my header logo on mobile view how can I fix this?

Schermafbeelding 2022-10-28 om 07.52.58.png
Schermafbeelding 2022-10-28 om 07.52.58.png2142×1318 310 KB

shop url: https://www.gallerychristian.com

thanks!

Christian Russo

2

Hi @christian_russo
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css

#qab_background {
height: auto!important;
}
#qab_bar {
padding: 10px 15px !Important;
}
3

I just found out already how to do it but know I got this problem:

Schermafbeelding 2022-10-28 om 08.15.43.png
Schermafbeelding 2022-10-28 om 08.15.43.png2144×1325 260 KB

the width from my page is to wide how can I get those 3 lines and the cart icon more to the middle?

4

Hi @christian_russo
In this case I think you should use section announcement bar in dawn theme, instead of the section from 3rd app.

5

Hi @christian_russo ,

Thank you for reaching out to the Shopify forums!

Let me quickly fix that issue for you.

Please add the below CSS into your base.css file:

@media screen and (max-width:768px) {
.header-wrapper .header {
    display: grid;
    grid-template-areas: 'left-icon heading icons';
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    padding-top: 3rem;
    padding-bottom: 1rem;
    padding-left: 25px;
    padding-right: 25px;
}
}

So, it will look like this:

image (33).png
image (33).png399×169 58.1 KB

If its working on your store then, do not forget to accept this solution :face_savoring_food:

Thanks & Regards,
Prezen Tech

6

it’s not working for me :disappointed_face:

7

isn’t there any way to fix it because I like to use this app

8

Hi @christian_russo

Sure, let me help you again with this.

Please add this below CSS in your base.css file.

@media screen and (max-width:768px) {
.header.header--top-center.page-width.header--has-menu {
    padding: 0 25px;
}
}
9

Hello @christian_russo

Go to the online store >Theme >Edit code >Assets >base.css >Add code in this file -

@media only screen and (max-width: 768px){
.header {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}
.header__icon--cart {
     margin-right: 0 !important;
}
header-drawer {
     margin-left: 0 !important;
}