How to fix text overlay shifting in mobile mode on my header?

[Jacqueline00]

My shopify page adehyiekreations.com has issues with the text shifting when in mobile mode.

This only happens on the header. Please help me fix it

[PageFly-Richard]

Hi @Jacqueline00 ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file:

@media screen and (max-width: 767px) {
    #slide-side-menu .slide-side-menu__inner>footer {
        position: static !important;
    }
    html.no-scroll .boom-ui-container {
        display: none;
    }
}

I hope it would help you
Best regards,

Richard | PageFly

[GemPages]

Hello @Jacqueline00

I would like to give you a solution to support you.

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

2. Open your theme.liquid theme file.

3. Paste the below code before :

Result:

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

[Jacqueline00]

I did but I keep seeing the same error.

[Jacqueline00]

I see only theme.css.liquid and not theme.css

where I am to add the code?

[GemPages]

@Jacqueline00

I see you added the correct code in theme.liquid . The menu is displayed beautifully on mobile

[PageFly-Richard]

Hi @Jacqueline00 ,

Sorry, Because there are missing.

You can paste my code at the TOP of the theme.css.liquid file:

@media screen and (max-width: 767px) {
    #slide-side-menu .slide-side-menu__inner>footer {
        position: static !important;
    }
    html.no-scroll .boom-ui-container {
        display: none;
    }
}

I hope it would help you
Best regards,

Richard | PageFly

[Jacqueline00]

Yes, I see it now! Thank you so much

That’s one of the problems though.

The other one, which is the copy text on the header has not been fixed.

The full text (HANDWOVEN KENTE AND FUGU TIES) shows on the desktop but only part of the text (AND FUGU TIES) shows on mobile

Please help.

[Jacqueline00]

@GemPages please help me with my other problem stated above.

[PageFly-Richard]

Hi @Jacqueline00 ,

Sorry for the late reply

Here I have 2 ways to handle this problem:

• First: You should re-upload the image with a larger height so that when the reply is on the small screen, there will be no problem on
• Second: I will fix the fixed height for the image with css, which will solve the above problem, but so the image will be cropped

If you want to try solution 2, you can refer to the css below and paste it at the TOP in theme.css.liquid file:

@media screen and (max-width: 767px) {
    #shopify-section-template--14583374512202__slideshow .custom-height-slide-1,
    #shopify-section-template--14583374512202__slideshow .flickity-viewport {
        height: 200px !important;
    }
}

I hope it would help you
Best regards,

Richard | PageFly

[Jacqueline00]

Thank you for the response.

I used option 2 and still didn’t see any change because some part of the text is still missing.

What could be the problem and what other ways can I solve it, please?

Thank You

[PageFly-Richard]

Hi @Jacqueline00 ,

You can try replace previous my code by below code at the TOP in theme.css.liquid:

#shopify-section-template--14583374512202__slideshow .flickity-slider .custom-height-slide-1, #shopify-section-template--14583374512202__slideshow .flickity-viewport {
    height: 200px!important;
}

I hope it would help you
Best regards,

Richard | PageFly

[Jacqueline00]

Thank you so much, Richard.

You have been so helpful.

My last request is for you to help me with adding an h1 tag to my landing page.

Can you please help with that?

[PageFly-Richard]

Hi @Jacqueline00 ,

Can you share your landing page code so we can check it?

[Jacqueline00]

Hi Richard, I am new to learning about the platform.

Where do I find that, please?

[PageFly-Richard]

Hi @Jacqueline00 ,

Sorry, I don’t know what landing page you are talking about, so I can’t guide you to find the correct code file. I think you may try contacting Shopify support or finding another expert regarding this issue.

Best regards,

Richard | PageFly