Jump to content

How to center and show text on slideshow mobile for Montauk theme

Go to solution Solved by tuanphan,

Recommended Posts

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

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;
}}

 

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.