Jump to content

Resizing Mobile Carousel to match desktop

Recommended Posts

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

IMG_BF8B00E6F357-1.jpeg

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

IMG_BF8B00E6F357-1.jpeg

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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
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
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

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.