Jump to content

Center slideshow text and button on tablet and mobile

Go to solution Solved by Ziggy,

Recommended Posts

https://www.grdowntownmarket.com/
Site password: Market1234

I'm trying to center the homepage slide show text and button for tablet and mobile, but here's the catch: I want it centered as soon as it snaps to the tablet width and stay centered the entire time you continue to resize your browser window.

Any help would be appreciated!

Edited by ryanbrinkerhoff
Link to comment

Can you share your website URL and the page this gallery is on?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
@media only screen and (max-width:900px) {
  .slide-content {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .user-items-list-banner-slideshow[data-title-alignment="left"] .list-item-content__title, .user-items-list-banner-slideshow[data-button-alignment="left"] .list-item-content__button-container {
    text-align:left !important;
  }
}

Let me know how that goes.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution

Here's a tweak:

@media only screen and (max-width:900px) {
  .slide-content, .slide-content .list-item-card-background {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .user-items-list-banner-slideshow[data-title-alignment="left"] .list-item-content__title, .user-items-list-banner-slideshow[data-button-alignment="left"] .list-item-content__button-container, .list-item-content__title, .list-item-content__button-container {
    text-align:center !important;
  }
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

That's really strange, it doesn't seem to be accepting the CSS correctly, and I'm not sure why. Do you have other CSS in your Custom CSS that might be affecting this?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 8 months later...

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.