ellen_b

Hi! I'm trying to add a sticky overlay scroll to create an effect like the one on this homepage: https://www.innerpowergrowthcoaching.com/ This is the site I'm working on: https://playfairappraising.squarespace.com/?password=tim I've been using this css, from this tutorial: https://insidethesquare.co/squarespace-tutorials/overlay-scroll #page .page-section { position: sticky!important; top: 0px!important } html { scroll-behavior: smooth } I've tried both the above css, which targets all sections, and singling out specific sections with the block IDs. In both cases, the scrolling goes all wonky. My theory was that it only worked on sections that *did not have a divider applied* but now I see that Inner Power Coaching site linked above, with the same style dividers, and clearly there's a way to do it! I'd really appreciate any insight/suggestions! Thanks in advance.

@Lesum Perfect, thank you!

@Lesum Success!

Hi @Ziggy! I used your code here and it worked great for desktop. Thank you! Now I would like to reduce the space between the product description and additional info on mobile. Maybe it is actually a different selector I need? (See screenshot). https://primecutbags.squarespace.com/shop-all/p/mauve-shearling-bum-bag password: bags I'd really appreciate and ideas! Thank you!

Hi @Ziggy! Jumping into this thread with a similar issue. I've used CSS to style my variant and quantity fields and have two issues: 1: I'm not sure how to get rid of this remaining rectangle around the variant 2: I'm wondering if there's a way to prevent the double border around the quantity field when it's selected? (See screenshots). https://primecutbags.squarespace.com/shop-all/p/mauve-shearling-bum-bag password: "bags" Any ideas? Thank you!

@Lesum You're everywhere! 🙂 Thank you, thank you! That worked great.

@tuanphan I have a question related to this thread that I don't think has been covered (apologies if I missed it!) I want to limit the related products shown to 4 (on desktop, mobile I've already limited to 2) and have all 4 presented on the same line. Right now the 4th is breaking onto a second line. Would you be able to recommend CSS for this? Here's the website with password: https://primecutbags.squarespace.com/shop-all/p/mauve-shearling-bum-bag/?password=bags Thank you!

@Lesum Amazing! Thanks yet again!

Hello again @Lesum! I just connected a different Instagram account to this website I've been working on and unfortunately, it caused me to lose the radius on the Instagram feed again. At least on all but the first photo? 🤔 I tried deleting this part of the CSS and adding it back without success: /* Instagram block images */ .instagram-block img { border-radius: 30px; } Maybe there is a different selector I should be using? https://thesucculentstudio.squarespace.com/?password=kristy Do you have any ideas? Thank you so much!

@Lesum Woohoo! Success 🙌🏻

@Lesum I ran into one more little snag with this one. I've found that if a product gallery only has one image (as opposed to a multi-image carousel) the border doesn't fit quite right. Maybe a further adjustment I need to make to the padding? (See screenshot) Single Image Product (doesn't fit) https://thesucculentstudio.squarespace.com/shop/p/4-inch-succulent-arrangement Multi-Image Product (fits) https://thesucculentstudio.squarespace.com/shop/p/disco-ball-succulent-arrangement Demo Site Password: "new" Any ideas? Thank you!

@Lesum to the rescue again! Thank you!

@Lesum Sorry, forgot to include! It's www.newshapesstudio.com/blog

@tuanphan Hi there, following up on this one as I just tried it without success. I'd love to get the padding at the bottom of this newsletter block to match the top, especially on mobile, if possible. (I did grab the correct block ID) It works to add padding to the top but not the bottom. Site url: https://thesucculentstudio.squarespace.com/?password=new Any advice would be much appreciated!

Hi there, I'm hoping someone can help me with some CSS to widen the text on my alternating blog on mobile (see screenshot). Thank you!

@Lesum Amazing, thank you!

@Lesum That worked! Thank you! Now I am noticing this happening on the product gallery on mobile... 🤔 And that product title is so close to the bottom of the image. Not sure if that's related?

THANK YOU @Lesum!! The only place remaining where it isn't working is when I insert one single product block into a regular page. This is the code that I thought would target that, but maybe I'm misunderstanding? Maybe that selector is for a summary block of products? /* Product blocks */ .products .grid-image-wrapper { border-radius: 30px; border: 1.5px solid #000; } https://thesucculentstudio.squarespace.com/?password=new

@Lesum I'm back again on this one. 😬 I just saw the list of all the CSS for adding borders and radius on images in a bunch of different places. Thank you so much! I've applied them all and have a few follow-up questions: 1. On the individual shop page, the outlines are doing something funny... They aren't appearing on the right side only. (See screenshot). 2. Is it possible to add this styling to images that appear within an individual blog post? I know that is not fluid editor in there so maybe it works differently. 3. Finally, I've added an Instagram feed to the homepage and the styling isn't working quite right there. The outline shows up but the radius isn't applying. The website url again is: https://thesucculentstudio.squarespace.com/?password=new If you have any tips I would really appreciate it! Will happily send another coffee your way 🙂

@WCS Figured it out!

@Lesum Woww, you are a code hero! Are you available to hire hourly for coding assistance by any chance?

@Lesum Here is the url: https://thesucculentstudio.squarespace.com/?password=new I haven't finished designing so all the final images aren't in there yet. But for testing purposes, you could use: #block-yui_3_17_2_1_1720561014139_90469 #block-yui_3_17_2_1_1720561014139_93451 #block-yui_3_17_2_1_1720561014139_95938 #block-yui_3_17_2_1_1720561014139_99079 Thank you!

@Lesum Success! Thanks so much. One follow up question: Is it possible to exclude a few specific image blocks from this styling? I've started adding in a few collage-type images that don't work with the outline. The majority of the images across the site I do want the radius and outline. It's just maybe 4-5 image site-wide that I'd like to exclude. Sorry to complicate things 🤪 and thank you so much for your help.

Hi @WCS! I have a similar question, although I am not able to separate out by section. Is it possible to exclude certain image blocks from CSS styling? You can see in the screenshot that I've added a few of these collage-style images that I don't want the outline (or need the radius) on. I suspect there will be 4-6 of these total. The website: https://thesucculentstudio.squarespace.com/?password=new Here is the code I'm using: // Adds radius and border to image blocks // .sqs-image img { border-radius: 30px; } .content-fill::after, .content-fit::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 30px; border: 1.5px solid #000; } Any advice would be much appreciated!

Hi, I am trying to use css to make it so every image on my website has a border radius of 30px plus a 1.5px black outline with the same radius. I used the code below, but it has only added a radius to the outline, not the image itself. Is there a different property for the image itself that I need to use? Thank you! .sqs-block-image { border: 1.5px solid black !important; border-radius: 30px; }