Weird overlap of sections

[tinyotters]

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?

[GemPages]

@Hello @tinyotters 

I would like to give you some recommendations to support you

The issue comes from below code in your theme.

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

[tinyotters]

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

[GemPages · Accepted solution]

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 </body>

<style>
     @media screen and (max-width: 749px){
        #Banner-template--14876584706186__1663593643728333ea .banner__heading{
            margin-top: 0px !important;
                
          }
         #Banner-template--14876584706186__1663593643728333ea .banner__content{
           order: 1 !important;
         }
         #Banner-template--14876584706186__1663593643728333ea .banner__media{
           order: 2 !important;
         }
      }
  </style>

(I changed the code above to avoid conflicts)

Like this:

I hope it works.

Best regards,
GemPages Support Team

[tinyotters]

This one worked @GemPages !  Thank you!

[GemPages]

I am glad that my solution is helpful to you 😁.

[MariposaSLMA]

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!

[KetanKumar]

@tinyotters 

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

[tinyotters]

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

[PageFly-Victor]

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

}

}

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

[tinyotters]

@PageFly-Victorthis one didn't work sadly

[Cedcommerce]

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

[tinyotters]

Sadly this did not work.