Jump to content

How to remove mobile padding on banner slideshow + remove overlay from banner slideshow buttons

Go to solution Solved by AndyB,

Recommended Posts

Link: https://opossum-trombone-3n69.squarespace.com/about

Password: leila

 

Hi, 

Do you know how I can remove the massive padding showing on mobile view in the bottom section of this page with the testimonial banner slideshow? Screenshot attached. I have removed padding every way I know how. It looks perfect in desktop mode, but with lots of padding in mobile view.

 

Also, my client has asked if I can remove overlay from the buttons so they show the true bright orange colour I have set (same as the footer colour). This works in mobile view, but not in desktop view...

 

Many thanks! 

Poppy

Screenshot 2023-04-15 at 14.17.39.png

Link to comment
  • Solution

Hi, Poppy.

Regarding the "padding" on mobile

I'm unsure how to change this off the top of my head, but let me tell you what's happening so you know why it looks like there's a lot of padding when viewed on mobile. In short, the container doesn't change size based on the testimonial that is visible.

If you scroll through the testimonials, you'll notice that the longest one fills the space vertically. So, the site is creating a container tall enough to accommodate the longest testimonial and then placing all of the testimonials in the middle of that container.

A few suggestions:

  1. Put the longest first. Doing this will at least make the section look full when first viewed.
  2. Make all of the testimonials similar in length.
  3. Hide the longest testimonial on mobile. Doing this SHOULD make the container the size of the next longest testimonial.

 

Button Color

This should help:

.user-items-list-banner-slideshow__arrow-icon-background-area {
  opacity: 1 !important;
}

Looking for help with a project?
💻 www.connectionmadedesign.com
 for hire on Upwork (Top Rated Plus)

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.