Slideshow photo & action button overlapping following sections Atlantic theme

beatrixandco
New Member
2 0 0

Hello! I have two slideshow sections on my homepage, and both the slideshow photo & action button are overlapping the following sections on the mobile site only. The spacing on the desktop site is fine. I've tried to adjust the sizing in the theme editor but it is not correcting. Could someone help me fix this issue? Thanks much in advance!

 

Website slideshow overlap ex 2.jpg

Website slideshow overlap ex 1.jpg

0 Likes
Speedimize
Shopify Partner
300 48 145

Hi @beatrixandco 

Aibek is here from Speedimize.io agency. 

You have a little problem in your styles. Please open code editor: 

Online Store -> Themes -> Actions-> Edit Code

Then in the editor open the theme.scss http://joxi.ru/MAjGyWvtjlDppr 

Inside, you will need to find the style below using the keyboard shortcuts cmd+f or ctrl+f and write it down .template-index .slideshow: after http://joxi.ru/D2P4x1asqPyO62 and delete the lines that we specified below:

@media (max-width: 719px) {
    .template-index .slideshow:after {
        position:absolute; - delete this line
        bottom:0;
        left: 15px;
        display: block;
        width:calc(100% - 30px); - and this line
        border-top: 1px solid #FAD9CF;
        content: “”;
    }
}

If it doesn't find it, then you can try deleting after. After that, everything should be fine on the mobile phone. If you are afraid of breaking something, it is better to create a duplicate of the theme so that there is no downtime.

Hope that helps you.

 

We Speedimize your store
Have a problem with speed performance, send me email here: hello@speedimize.io


If our advice was helpful please LIKE or ACCEPT SOLUTION

Please follow the steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > theme.scss.liquid and paste this at the bottom of the file:
@media screen and (max-width: 719px){
.template-index .slideshow:after{
position: relative !important;
}
}

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
Natztech
Shopify Partner
1922 494 1176

hello @beatrixandco 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 719px){
.template-index .slideshow:after{
position: relative !important;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
0 Likes
GabrielaRenard
New Member
1 0 0

Hi @beatrixandco 

I'm new at shopify and I'm experiencing the same problem as you with the Atlantic theme. 

It's been a while since your last post, have you been able to solve the issue. If yes, how? 

I just sent and email to Pixel Union, but I think they are going to take some time to reply.

Thanks much in advance!

0 Likes
beatrixandco
New Member
2 0 0

Hello! I was able to resolve the issue after trying each of the solutions listed here. Unfortunately I can't remember which code actually fixed the problem for me - I believe it was the solution posted by Natztech2312, just not 100%. Apologies, but hope you can get this to work for your shop!

 

 

0 Likes