KMills Posted November 17 Posted November 17 Site URL: https://seadragon-marlin-z77k.squarespace.com/ I have pinned images with text that scrolls up on several places on my site (twice on homepage and once on About. I have it set not it display on mobile ( in some instances creating separate mobile sections). I am happy with it on my laptop and phone but on ipad it shows the color block under the image as it scrolls. Hard to capture in a photo as it's moving but I attached a screen shot from my ipad. I did some Googling and it seems like this is a regular issue with pinned images but I also couldn't quite find the solution. Code: 1234 I'd appreciate it if anyone has time to take a peek! Thanks!
tuanphan Posted November 19 Posted November 19 I see your layout different your screenshot, you mean this? KMills 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
KMills Posted November 20 Author Posted November 20 (edited) @tuanphan - Thanks for responding! I have two sticky images on the site. One is on the homepage where your image shows https://seadragon-marlin-z77k.squarespace.com/ and one is on https://seadragon-marlin-z77k.squarespace.com/about where my image shows. I am having the same problem with both on ipad view. Password: 1234 Edited November 20 by KMills
tuanphan Posted November 22 Posted November 22 With Homepage, try this to Website Tools > Custom CSS box @media screen and (max-width:991px) and (min-width:768px) { .fe-block-yui_3_17_2_1_1731805077359_99812 { height: 100vh !important; } } KMills 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
KMills Posted November 22 Author Posted November 22 @tuanphan - I appreciate the attempt but this unfortunately did not fix it. I had tried something similar when I first set up the pinned image. I just tried your code as well hoping that mine was just a little off. I don't think I will have a ton of iPad views for this site but it's still driving me crazy that I can't figure it out.
Squareko Posted November 24 Posted November 24 Directions: Add a List Section with it’s design set to “Simple List”. In the List Section settings: Set Max Columns to 1 In the Style area, enable the Card setting Turn on “Show Image”, “Show Title”, “Show Body”, “Show Button” Paste in the CSS to your custom CSS area and replace any of the variables as you’d like! Add this code into custom css: section[data-section-id="123"] .user-items-list-simple{ li.list-item { @base-top: 25px; @num-elements: 5; @sticky-start: 100px; @sticky-start-mobile: 50px; --desktop-height: 400px; --mobile-height: 600px; --mobile-image-height: 200px; --max-width: 800px; --border-radius: 20px; display: grid; grid-template-columns: 1fr 1fr; position: sticky; overflow: hidden; top: 200px; box-shadow: 2px 2px 8px hsla(0, 0%, 0%, 0.12); border-radius: var(--border-radius); padding:0px !important; height: var(--desktop-height); max-width: var(--max-width); margin:auto; .list-item-content{ grid-row: 1; overflow: auto; } .list-item-media{ margin-bottom:0px !important; } .list-item-media-inner{ padding: 0px !important; height: 100% !important; } .list-item-content{ padding: 17px; display: flex; flex-direction: column; } @media(max-width: 767px){ // Uncomment the two settings below to disable this effect on mobile // position: relative; // top:0 !important; grid-template-columns: 1fr; height: var(--mobile-height); .list-item-content{ grid-row: 2; } .list-item-media-inner{ min-height: var(--mobile-image-height); } } // Generate Offsets .generate-offsets(@i) when (@i > 0) { &:nth-child(@{i}) { top: (@base-top * @i) + @sticky-start; } @media(max-width:767px){ &:nth-child(@{i}) { top: (@base-top * @i) + @sticky-start-mobile; } } .generate-offsets(@i - 1); } .generate-offsets(@num-elements); } &[data-alignment-vertical="bottom"] .list-item-content{ justify-content: end; } &[data-alignment-vertical="top"] .list-item-content{ justify-content: start; } &[data-alignment-vertical="middle"] .list-item-content{ justify-content: center; } }
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment