Why is there a weird section overlap on my mobile homepage?

Technical Q&A
1

Hi All, I’m at tinyotters.com - we’re having this odd overlap about halfway down in one of our sections on the mobile version of our homepage. Any thoughts?

tinyotters_0-1668651741073.png
tinyotters_0-1668651741073.png860×850 188 KB

2 Likes
2

@Hello @tinyotters

I would like to give you some recommendations to support you

The issue comes from below code in your theme.

GemPages_0-1668655754414.png
GemPages_0-1668655754414.png1231×415 16.9 KB

You can instead the above code or write below it by this code

@media screen and (max-width: 749px){
        .banner__heading{
            margin-top: 0px !important;
                
          }
         .banner--mobile-bottom:not(.banner--stacked) .banner__content{
           order: 1 !important;
         }
         .banner--mobile-bottom .banner__media{
           order: 2 !important;
         }
      }

Hope my recommendation can works and support for you!
Kind & Best regards!

GemPages Support Team

3

@tinyotters

oh sorry for this issue, can you please send store url so i will check and guide you

4

www.tinyotters.com - sorry thought i posted it in the original link!

5

@GemPages Where do I post this code? What part of the coding section?

6

Hi @tinyotters

You can follow:

  1. Go to Online Store → Theme → Edit code

  2. Open your theme.liquid theme file

  3. Paste the below code before

(I changed the code above to avoid conflicts)

Like this:

GemPages_0-1668673194526.png
GemPages_0-1668673194526.png1356×888 68.7 KB

I hope it works.

Best regards,
GemPages Support Team

7

Hi @tinyotters ,

This is Victor from PageFly - Advanced Page Builder. I would love to give you some recommendations

  • Go to Online Store->Theme->Edit code
  • Asset-> theme.css paste the below code at the bottom of the file
@media screen and (max-width: 749px){

.banner__heading {

margin-top:-300px !important

}

}

PageFlyVictor_0-1668680324574.png
PageFlyVictor_0-1668680324574.png207×445 29.2 KB

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

8

Hello @tinyotters ,

To fix this issue, you need to add the below code at the end of your assets/base.css file:

@media screen and (max-width: 749px){

.banner__heading{

margin-top: 0px !important;

}

.banner–mobile-bottom .banner__media{

order: 2 !important;

}

}

Hope it helps, let us know if you need any help.

Regards,

CedCommerce

9

Sadly this did not work.

10

@PageFly-Victor this one didn’t work sadly

11

This one worked @GemPages ! Thank you!

12

I am glad that my solution is helpful to you :grin: .

13

Hello, I am having the same problem – in several places on our homepage.

I wondered if this fix would also work with the Dawn theme?

Also, I am not a coder and feel uncertain about using code – is there another way to fix this using the editing menu instead of code?

Thanks!