Jump to content

Slideshow Banner Images CSS for Mobile

Recommended Posts

  • Replies 12
  • Views 510
  • Created
  • Last Reply

Top Posters In This Topic

On 7/5/2022 at 11:57 PM, MissP99 said:

It worked! Thank you so much! Now the arrows have moved to the bottom of the images instead of remaining on the sides. Is there a way to keep them on the sides with CSS?

Use this new code

@media screen and (max-width:767px) {
/* List section height */
.user-items-list-item-container[data-section-id="627aaa8c4c4ad22a9fa789d4"] {
ul {
    min-height: unset !important;
}
.desktop-arrows {
    display: flex !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
@tuanphan

I have a single banner image on each page of the website (like the banner slideshow you helped me with on the homepage.) The list-item-container doesn't seem to work for the single banner images. Is there a different code to use for the other pages? Thank you!

On 7/1/2022 at 9:34 PM, tuanphan said:
@media screen and (max-width:767px) {
/* List section height */
.user-items-list-item-container[data-section-id="627aaa8c4c4ad22a9fa789d4"] ul {
    min-height: unset !important;
}
}

 

Link to comment
8 hours ago, MissP99 said:
@tuanphan

I have a single banner image on each page of the website (like the banner slideshow you helped me with on the homepage.) The list-item-container doesn't seem to work for the single banner images. Is there a different code to use for the other pages? Thank you!

 

Can you share link to some pages? We can check easier

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
On 7/10/2022 at 12:11 AM, MissP99 said:

@tuanphan Sure!

gatherroundevents.com/about

gatherroundevents.com/inventory

password: squarespace

Edit 2 pages > Add a Code Block at bottom of page > Paste this code > Then save & reload the site

<style>
  @media screen and (max-width:767px) { 
  article section:first-child {
    min-height: unset !important;
    margin-top: 5vh;
}}
</style>

 

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
  • 1 month later...
On 9/2/2022 at 9:44 AM, AT76 said:

@tuanphan

Hi, I'm having the same issue with a slide show gallery on the homepage. Tried the code above (subbing the data ID) but it's not working could you assist?

https://lrmanagementpartners.com/

p.s. this site is on SS 7.0

Thank you!

Try adding to Design > Custom CSS > Then save & reload the site

/* resize top slideshow */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1661986941646_9420, div#block-yui_3_17_2_1_1661986941646_9420 .slide {
    height: 300px !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
9 hours ago, AT76 said:

@tuanphan Hi, thanks so much, that worked but the carousel arrows are off, any suggestions? Thanks in advance!

image.png.2ce1ce293f491a5180488308f8a31789.png

Try this new code

/* resize top slideshow */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1661986941646_9420, div#block-yui_3_17_2_1_1661986941646_9420 .slide {
    height: 300px !important;
}
div#block-yui_3_17_2_1_1661986941646_9420 a[role="button"] {
    top: 20% !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

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.