CosmicBloom81 Posted October 26, 2022 Share Posted October 26, 2022 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
Caroline_Smith Posted October 27, 2022 Share Posted October 27, 2022 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). 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
CosmicBloom81 Posted October 28, 2022 Author Share Posted October 28, 2022 (edited) @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? Edited October 28, 2022 by CosmicBloom81 Link to comment
Caroline_Smith Posted October 28, 2022 Share Posted October 28, 2022 (edited) 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. Edited October 28, 2022 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
CosmicBloom81 Posted October 28, 2022 Author Share Posted October 28, 2022 (edited) @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 October 28, 2022 by CosmicBloom81 Link to comment
Caroline_Smith Posted October 28, 2022 Share Posted October 28, 2022 (edited) 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; } } Edited October 28, 2022 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
CosmicBloom81 Posted October 29, 2022 Author Share Posted October 29, 2022 @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? Link to comment
tuanphan Posted October 31, 2022 Share Posted October 31, 2022 Try adding to Design > Custom CSS @media screen and (min-width:768px) { .user-items-list-banner-slideshow .slides--initialized { padding-right: 0 !important; } } 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
CosmicBloom81 Posted October 31, 2022 Author Share Posted October 31, 2022 @tuanphanThank you so much! Worked perfectly! tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment