fvbrk_brand Posted January 28, 2022 Share Posted January 28, 2022 Site URL: https://www.fvbrk.com/ I've tried to search the internet for a way to resize the carousel on my homepage on the mobile side of my site but nothing has worked so far. I'm trying to get the design as close to the desktop version as possible as a huge chunk of my images are being cut off on the sides. I'm launching in a couple weeks but was hoping to have this part completed soon as I will be sending my site off to some test customers soon and wanted to get their feedback on their experience. Any help would be much appreciated and thanks in advance. site: www.fvbrk.com Link to comment
Beyondspace Posted January 28, 2022 Share Posted January 28, 2022 1 hour ago, fvbrk_brand said: Site URL: https://www.fvbrk.com/ I've tried to search the internet for a way to resize the carousel on my homepage on the mobile side of my site but nothing has worked so far. I'm trying to get the design as close to the desktop version as possible as a huge chunk of my images are being cut off on the sides. I'm launching in a couple weeks but was hoping to have this part completed soon as I will be sending my site off to some test customers soon and wanted to get their feedback on their experience. Any help would be much appreciated and thanks in advance. site: www.fvbrk.com Try adding to Home > Design > Custom Css @media only screen and (max-width: 767px) { section[data-section-id="61f25723b945a86ac542f221"] .list-item .slide-media-container img { height: auto !important; } } Let me know how it works mazerole 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) 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
fvbrk_brand Posted January 29, 2022 Author Share Posted January 29, 2022 On 1/27/2022 at 9:37 PM, bangank36 said: Try adding to Home > Design > Custom Css @media only screen and (max-width: 767px) { section[data-section-id="61f25723b945a86ac542f221"] .list-item .slide-media-container img { height: auto !important; } } Let me know how it works Mannn, I shoulda just came here first. It would have saved me 2 days lol Thank you, it works perfectly! Link to comment
fvbrk_brand Posted January 29, 2022 Author Share Posted January 29, 2022 On 1/27/2022 at 9:37 PM, bangank36 said: Try adding to Home > Design > Custom Css @media only screen and (max-width: 767px) { section[data-section-id="61f25723b945a86ac542f221"] .list-item .slide-media-container img { height: auto !important; } } Let me know how it works Actually, there is one more thing. Is there a way to make the arrows hidden? Also, the positioning of it on mobile creates a huge gap of space. Is there a way to adjust the space of that to be smaller and not affect the desktop version? Thanks again for the resizing @bangank36! Link to comment
Beyondspace Posted January 29, 2022 Share Posted January 29, 2022 6 hours ago, fvbrk_brand said: Actually, there is one more thing. Is there a way to make the arrows hidden? Also, the positioning of it on mobile creates a huge gap of space. Is there a way to adjust the space of that to be smaller and not affect the desktop version? Thanks again for the resizing @bangank36! Try adding to Home > Design > Custom Css @media only screen and (max-width: 767px) { .user-items-list-banner-slideshow .arrow-container,.user-items-list-banner-slideshow .mobile-arrows { display: none; } .slide { padding-top:0 !important; } .user-items-list-banner-slideshow .slides { min-height: 0 !important; } } Let me know how it works on your site BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) 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
fvbrk_brand Posted January 29, 2022 Author Share Posted January 29, 2022 5 hours ago, bangank36 said: Try adding to Home > Design > Custom Css @media only screen and (max-width: 767px) { .user-items-list-banner-slideshow .arrow-container,.user-items-list-banner-slideshow .mobile-arrows { display: none; } .slide { padding-top:0 !important; } .user-items-list-banner-slideshow .slides { min-height: 0 !important; } } Let me know how it works on your site It works! Thank you again @bangank36! Link to comment
khyam0404 Posted September 8 Share Posted September 8 Hi, I'm trying to do something similar - remove the blank space beneath the carousel on mobile layout. Is anyone able to help with telling how to remove this area please? View here: https://eagle-octopus-thn7.squarespace.com/ Password: foxtrot Link to comment
tuanphan Posted September 12 Share Posted September 12 On 9/8/2023 at 5:11 PM, khyam0404 said: Hi, I'm trying to do something similar - remove the blank space beneath the carousel on mobile layout. Is anyone able to help with telling how to remove this area please? View here: https://eagle-octopus-thn7.squarespace.com/ Password: foxtrot Hi, You mean reduce this space? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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