gregbarbosa Posted September 24, 2021 Share Posted September 24, 2021 (edited) Site URL: https://weareteller.com/sandbox How do I turn a code block into a sticky item? I'm using the following code and noticing it works with other block types, but not code blocks: .code-block { position: sticky; position: -webkit-sticky; top: 100px !important; } My guess has to do with how position: sticky handles content inside of wrappers, but I'm not sure. I'd like the right side column (text inside a code block) to stick as a visitor scrolls down a page. Edited September 24, 2021 by gregbarbosa fixing text Link to comment
Beyondspace Posted September 27, 2021 Share Posted September 27, 2021 (edited) On 9/24/2021 at 11:55 PM, gregbarbosa said: Site URL: https://weareteller.com/sandbox How do I turn a code block into a sticky item? I'm using the following code and noticing it works with other block types, but not code blocks: .code-block { position: sticky; position: -webkit-sticky; top: 100px !important; } My guess has to do with how position: sticky handles content inside of wrappers, but I'm not sure. I'd like the right side column (text inside a code block) to stick as a visitor scrolls down a page. try #block-yui_3_17_2_1_1632403820243_21594 +.row .span-4 { position: sticky; top: 100px !important; } #collection-614dfddd7a19a10a3fcc2518 .site-wrapper { overflow: visible !important; } Edited September 27, 2021 by bangank36 gregbarbosa 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted September 27, 2021 Share Posted September 27, 2021 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
gregbarbosa Posted September 27, 2021 Author Share Posted September 27, 2021 (edited) 4 hours ago, bangank36 said: #block-yui_3_17_2_1_1632403820243_21594 +.row .span-4 { position: sticky; top: 100px !important; } #collection-614dfddd7a19a10a3fcc2518 .site-wrapper { overflow: visible !important; } @bangank36 that worked! Thank you. Targeting the span and setting overflow to visible was what I missing! Edited September 27, 2021 by gregbarbosa Beyondspace 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