Resizing Mobile Carousel to match desktop

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

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

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! 

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!

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

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!