Slideshow Banner Images CSS for Mobile

My homepage banner images look terrible on mobile. (I'd really like to keep from changing them to vertical images if possible.) Can anyone help with CSS for fixing this?

https://hawk-flugelhorn-5hb3.squarespace.com/

password: squarespace

Thank you!

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
/* List section height */
.user-items-list-item-container[data-section-id="627aaa8c4c4ad22a9fa789d4"] ul {
    min-height: unset !important;
}
}

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?

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

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

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

@tuanphan Sure!

gatherroundevents.com/about

gatherroundevents.com/inventory

password: squarespace

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>

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

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

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

9 hours ago, AT76 said:

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

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

@tuanphan That worked great, thank you!!!