When my viewport width goes below a certain size, my slideshow text goes crazy?

Solved
CrabShopper
New Member
11 0 0

Alright so, on debut, I have modified my slideshow text to appear nearer towards the bottom of the slideshow window using this css: 

 

/*offset slideshow text to bottom*/
.slideshow__text-content.slideshow__text-content--vertical-bottom.text-center {
bottom: 0px !important;
}

This looks great and has the desired effect, except that if I minimize my viewport below a certain point, the slideshow text teleports and ruins the formatting of the design. 

Can someone help me figure out how to prevent the teleport from happening? There's plenty of room for the text in the place it's supposed to be, so I'm not sure what's causing this. 

 

Shop Address: www.comfycouchclothes.com

Password: gawcku

 

HfxIIFPy9c.gif

 

 

0 Likes
alvinkonda
Shopify Partner
44 5 9

This is an accepted solution.

Hi,

The theme you are using is showing two captions, one for desktop and one for mobile. Try with the following code:

.slideshow__title, 
.slideshow__subtitle {
   display: block !important
}
.slideshow__arrows--mobile ~ .slideshow__text-content--mobile {
  display: none !Important;
}
FireTheme.com - The Best Free Shopify Theme To Increase Conversion Rates (CVR)
Increase your store conversion rates (CVR) and average order value (AOV) with FireTheme, the world's most-loved Free Shopify Theme. Developed for maximum performance, flexibility in mind, and simplicity at core, you can be 100% sure that...
0 Likes
CrabShopper
New Member
11 0 0

Hi there, that worked! Thanks so much. But unfortunately it does still mess up the formatting, in a different way, at the lower viewport widths... can you help me figure out how to get the text ' back down' instead of having it move up to the middle again once I lower the viewport size? It seems like the 'bottom 0 px' instruction is getting ignored once the viewport swaps to mobile style.

 

eFZ4amC8PW.gif

0 Likes
alvinkonda
Shopify Partner
44 5 9

This is an accepted solution.

Hi,

 

When you added the "bottom: 0" add as well "top: auto". It should work fine.

FireTheme.com - The Best Free Shopify Theme To Increase Conversion Rates (CVR)
Increase your store conversion rates (CVR) and average order value (AOV) with FireTheme, the world's most-loved Free Shopify Theme. Developed for maximum performance, flexibility in mind, and simplicity at core, you can be 100% sure that...
0 Likes
CrabShopper
New Member
11 0 0

Perfect! Thank you

0 Likes