Jump to content

Problem with testimonial slider arrows on mobile

Recommended Posts

Hi all,

I'm having a strange issue with the arrows used to scroll between testimonials on this page (mobile view): http://thesacredspiritco.com/testimonials

Even when I change the settings within the "Edit Content" area of the section, choosing to put the arrows on the sides of the testimonials, they are still showing up at the very bottom of the screen - overlapping the footer, no less. 

Any ideas as to how to fix this? Thanks!

Link to comment

Hello!

The mobile views for the slider are meant to be placed below the content on mobile (see first picture).

After using DevTools to look at this issue on your site, it seems that you have some custom code that is setting a max-height property for that specific page section, and that is cutting off the arrows completely on mobile since they are at the bottom of the page section (see second attachment). 

Screenshot_478.png

Screenshot_477.png

Feel free to email me with any customization inquiries or questions you may have!

Free Squarespace Resources: DevTools Minicourse,  11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator

Link to comment
26 minutes ago, CosmicBloom81 said:

@Caroline_SmithThank you! I'm not sure why the custom code you mentioned would move the arrows down to the bottom of the page (the footer area), though? 

 

 

It's not that it moves it to the bottom of the page; it has to do with how the arrows are positioned within the page section. Here is my best attempt at explaining it:

The arrows are positioned with "position: absolute;" Elements that are positioned with "absolute" are removed from the natural document flow, and therefore no actual space is created for the element in the page layout. This allows us to place an element with absolute position in the exact place we want it in the document instead of where it would normally be placed. So this means that if the page section has the property "max-height: 825px", it will not account for the space that the arrows would take up if they were positioned normally with the document flow, so it essentially just ignores the arrows and that makes them overlap in the footer.

Screenshot_478.png

Screenshot_477.png

Edited by Caroline_Smith

Feel free to email me with any customization inquiries or questions you may have!

Free Squarespace Resources: DevTools Minicourse,  11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator

Link to comment

@Caroline_SmithThanks so much for taking the time to explain that! Ok - so perhaps what I should really be asking for help with is how to get the background image behind the testimonials (the photo of the Egyptian carvings) to not be so tall on mobile. (If I don't make any customizations to the testimonials section for mobile, there is a lot of blank space above and below the testimonials themselves, occupied by the Egyptian carvings image, when you look at the page on mobile.)

Applying the max-height property to the testimonials section that appears on mobile (as opposed to desktop) was my way of trying to achieve that, but then the problem with the arrows being moved down happens. Any ideas?

Thanks again!

 

Edited by CosmicBloom81
Link to comment
1 hour ago, CosmicBloom81 said:

@Caroline_SmithThanks so much for taking the time to explain that! Ok - so perhaps what I should really be asking for help with is how to get the background image behind the testimonials (the photo of the Egyptian carvings) to not be so tall on mobile. (If I don't make any customizations to the testimonials section for mobile, there is a lot of blank space above and below the testimonials themselves, occupied by the Egyptian carvings image, when you look at the page on mobile.)

Applying the max-height property to the testimonials section that appears on mobile (as opposed to desktop) was my way of trying to achieve that, but then the problem with the arrows being moved down happens. Any ideas?

Thanks again!

 

The best way I have found so far is to give the list items container a negative margin-bottom and margin-top to lessen the space. Replace the max-height rule with this, and you'll need to change the margin-bottom and margin-top property to a negative value that works for you on mobile:

@media screen and (max-width: 575px) {
  .user-items-list-banner-slideshow .slide-content {
    margin-bottom: -149px;
    margin-top: -149px;
  }
}

 

Screenshot_478.png

Screenshot_477.png

Edited by Caroline_Smith

Feel free to email me with any customization inquiries or questions you may have!

Free Squarespace Resources: DevTools Minicourse,  11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator

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.