madkinddesign Posted July 8, 2022 Share Posted July 8, 2022 Site URL: https://indigo-orb-2eff.squarespace.com/ Hi! Disclaimer: my coding skills are very novice. However, I am working on a client's home page and was able to figure out how to code a banner slideshow list section to show up as a split screen on desktop and tablet. In mobile, the text appears as an overlay on top of the photo. Could someone help me edit the coding so that the image appears stacked above the content card, text, and slider buttons in mobile? Here is the website: https://indigo-orb-2eff.squarespace.com/ Here is the coding: @media only screen and (min-width: 640px){ section[data-section-id="62ad4f02e9d8d9784d892462"] .user-items-list-banner-slideshow .list-slideshow-image{ width:50%!important; left:0!important; } section[data-section-id="62ad4f02e9d8d9784d892462"] .user-items-list-banner-slideshow .slide-content { margin-left: 55%!important; width:45%!important; } section[data-section-id="62ad4f02e9d8d9784d892462"] .user-items-list-banner-slideshow .slide { background: #e5e5e5!important; } section[data-section-id="62ad4f02e9d8d9784d892462"] .user-items-list-banner-slideshow { margin-left: 120px; margin-right: 120px; } section[data-section-id="62ad4f02e9d8d9784d892462"] .slides{ padding-right:0!important; } } @media only screen and (max-width: 640px){ section[data-section-id="62ad4f02e9d8d9784d892462"] h2, section[data-section-id="62ad4f02e9d8d9784d892462"] p { color: #ffffff!important; } } Link to comment
tuanphan Posted July 9, 2022 Share Posted July 9, 2022 Hi. What is access password? 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
madkinddesign Posted July 11, 2022 Author Share Posted July 11, 2022 @tuanphan oops sorry -- the access password is tnblitz12 Link to comment
tuanphan Posted July 11, 2022 Share Posted July 11, 2022 Use this CSS /* Stacked List Slideshow mobile */ @media screen and (max-width:767px) { .user-items-list-item-container[data-section-id="62ad4f02e9d8d9784d892462"] { .slide-media-container { height: 39% !important; } .slide-content.list-item-card-background { height: 50%; margin-top: 0px !important; background-color: rgba(0,0,0,0.75); padding: 10px !important; margin-top: 70% !important; } li.slide.list-item { padding: 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment