mikemobley Posted June 1, 2022 Share Posted June 1, 2022 Site URL: https://www.myontrackrealty.com/home-in-dallas-texas-testing Hey guys, on this page right here, on mobile, it shows the slideshow at the bottom (testimonial slideshow) but the text won't show all the way and then strangely moves around on the following slides. I have this in CSS custom. In fact, I have this for the whole page for the desktop version of the slideshow and the mobile. Any help on the mobile part getting fixed please? /* slider with text overlay */ .sqs-block-gallery .sqs-gallery-block-slideshow { max-height: 500px !important; .sqs-gallery-design-stacked-slide { max-height: 500px !important; overflow: hidden; img { transition: Slide 300ms !important; } } .meta { background-color: transparent; max-width: 100% !important; transition: Slide 700ms !important; -webkit-transition: Slide 700ms !important; -moz-transition: Slide 700ms !important; -ms-transition: Slide 700ms !important; } .meta-title { text-align: center; font-size: 20px; text-transform: uppercase; letter-spacing: 2px; padding: 6px 20px; color: #042663; } .meta-description p { text-align: center; color: #ffffff; font-size: 22px; letter-spacing: 1px; padding-top: 4px; max-width: 550px; } .meta-description a:link { color: #9DB0D8; text-align: center !important; } .sqs-gallery-design-stacked-slide:hover { img { -webkit-filter: blur(3px); filter: blur(3px); } } } @media screen and (max-width:480px) { /* Show description */ .sqs-gallery-block-slideshow .meta { display: block !important; } /* Font size */ .sqs-gallery-block-slideshow .meta * { font-size: 8px !important; } } Link to comment
Solution tuanphan Posted June 2, 2022 Solution Share Posted June 2, 2022 Try adding this code for mobile @media screen and (max-width:640px) { .sqs-gallery-block-slideshow .slide.loaded .meta { margin: 0 !important; height: auto !important; transform: translate(-50%,-50%) !important; width: 100% !important; }} mikemobley 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
mikemobley Posted June 2, 2022 Author Share Posted June 2, 2022 19 minutes ago, tuanphan said: Try adding this code for mobile @media screen and (max-width:640px) { .sqs-gallery-block-slideshow .slide.loaded .meta { margin: 0 !important; height: auto !important; transform: translate(-50%,-50%) !important; width: 100% !important; }} Thank you so much! This was perfect and it did it! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment