threadsonline Posted May 23 Share Posted May 23 Hi guys, I have a slideshow as the first section on my homepage. I have used the below custom code to shorten the length of the slideshow on mobile view. //Decrease slideshow height on mobile @media screen and (max-width:767px) { .user-items-list-banner-slideshow { height: 50vh !important; } } This has worked well, however I was wondering if a code can be used to resize/adjust the placement of the images on mobile view only? The slideshow images look great on desktop, but they're only showing a fraction/zoomed in on mobile. I will attach screenshots for reference. Thanks! site: https://threadsonline.co.uk/ password: welcome Link to comment
Beyondspace Posted May 23 Share Posted May 23 4 hours ago, threadsonline said: Hi guys, I have a slideshow as the first section on my homepage. I have used the below custom code to shorten the length of the slideshow on mobile view. //Decrease slideshow height on mobile @media screen and (max-width:767px) { .user-items-list-banner-slideshow { height: 50vh !important; } } This has worked well, however I was wondering if a code can be used to resize/adjust the placement of the images on mobile view only? The slideshow images look great on desktop, but they're only showing a fraction/zoomed in on mobile. I will attach screenshots for reference. Thanks! site: https://threadsonline.co.uk/ password: welcome Try adding Custom Css @media only screen and (min-width: 767px) { .user-items-list-banner-slideshow .list-slideshow-image { height: auto !important; } } The second approach we can try is adding new section for image on mobile then we use CSS to hide it on desktop view BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
threadsonline Posted May 23 Author Share Posted May 23 7 hours ago, Beyondspace said: Try adding Custom Css @media only screen and (min-width: 767px) { .user-items-list-banner-slideshow .list-slideshow-image { height: auto !important; } } The second approach we can try is adding new section for image on mobile then we use CSS to hide it on desktop view Hiya, thanks for your css suggestion. Unfortunately this didn't work properly for me but i went with the second approach (not sure why I didn't think of just doing that in the first place!) thanks! Link to comment
Solution tuanphan Posted May 25 Solution Share Posted May 25 On 5/24/2024 at 6:34 AM, threadsonline said: Hiya, thanks for your css suggestion. Unfortunately this didn't work properly for me but i went with the second approach (not sure why I didn't think of just doing that in the first place!) thanks! Try this CSS code @media screen and (max-width:767px) { .user-items-list-item-container[data-section-id="664fc88d2655f907d3cca231"] ul, .user-items-list-item-container[data-section-id="664fc88d2655f907d3cca231"] { min-height: unset !important; margin-top: 3vh; } } 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment