Problem with testimonial slider arrows on mobile

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!

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). 

@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? 

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.

@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!

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;
  }
}

@Caroline_SmithThat worked like a charm - thank you so much... except that now, for some reason, the testimonials look slightly shifted to the left (as opposed to perfectly centered) when I look at the page on Desktop view: https://www.thesacredspiritco.com/testimonials

Any idea how to fix that? 

Try adding to Design > Custom CSS

@media screen and (min-width:768px) {
.user-items-list-banner-slideshow .slides--initialized {
    padding-right: 0 !important;
}
}

@tuanphanThank you so much! Worked perfectly!