Jump to content

Resize banner slideshow on mobile only

Recommended Posts

Site URL: https://www.thedesignmaker.ca/

Hi There,

I need help resizing the banner slideshow on the mobile version.

Desktop version is great but the mobile version crop the images and looks bad, I want to show the full length of the images.

I've tried a bunch of code from the forum but nothing worked.

If anyone could help me it would be really appreciate.

Thank you!

 

 

Link to comment
On 4/12/2022 at 10:25 PM, BMLM said:

Site URL: https://www.thedesignmaker.ca/

Hi There,

I need help resizing the banner slideshow on the mobile version.

Desktop version is great but the mobile version crop the images and looks bad, I want to show the full length of the images.

I've tried a bunch of code from the forum but nothing worked.

If anyone could help me it would be really appreciate.

Thank you!

 

 

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  section[data-section-id="6238cb9339d72d5eaf92fe8d"] .slide-media-container img {
    height: auto !important;
  }

  section[data-section-id="6238cb9339d72d5eaf92fe8d"] .slide-content h2 {
    font-size: 20px !important;
  }

  section[data-section-id="6238cb9339d72d5eaf92fe8d"] .list-item {
    padding: 0 12% 21% !important;
  }

  section[data-section-id="6238cb9339d72d5eaf92fe8d"] .slide-content {
    margin-top: 20px !important;
  }

  section[data-section-id="6238cb9339d72d5eaf92fe8d"] .slides.slides--initialized {
    min-height: 60px !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
On 4/20/2022 at 2:45 AM, BMLM said:

Thank you!

The image is good but now the text over the image is too big.
Is that possible to leave the text just under the image, I mean between image and arrows?

Thanks again.

Don't remove any code in your current code

Add to Design > Custom CSS

/* Mobile List Slideshow - Text under image */
@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="6238cb9339d72d5eaf92fe8d"] {
.slide-media-container {
    position: relative !important;
}
li.slide.list-item {
    flex-direction: column;
    padding-left: 0 !important;
    padding-right: 0 !important;
}}}

list.thumb.png.5a66feec4f88fc059982a522ec973369.png

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
  • 7 months later...
On 12/13/2022 at 1:21 AM, theloopylace said:

Hi, 
I am trying to do the same thing on my website. On my about page I am trying to resize the banner slide show block for mobile. Right now its very long on mobile. Both text and image. 

https://apoppyplace.com/about

Hi,

Which slideshow are you referring to? I don't see it on about page

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

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.