joessqsp Posted March 17, 2022 Share Posted March 17, 2022 Site URL: https://carnation-tangerine-dd9n.squarespace.com/ I've created square images of a green block with rounded radius corners, and I've added them to a 'Headline' section and chosen the 'Card' layout option. Then instead of using original image, I'm styling the image with a shape, which controls how it's displayed (in a long paralellagram shape with 2:3 ratio). Annoyingly though the layout is placing a grey line top and bottom, which I can't remove even by uploading a PNG with a transparent background, which suggests it's baked into the layout i've chosen. Is there a way to hide this background, please? Attached a screenshot of what I mean. See line above and below the green block image. Link to comment
Jia Posted March 17, 2022 Share Posted March 17, 2022 2 hours ago, joessqsp said: Site URL: https://carnation-tangerine-dd9n.squarespace.com/ I've created square images of a green block with rounded radius corners, and I've added them to a 'Headline' section and chosen the 'Card' layout option. Then instead of using original image, I'm styling the image with a shape, which controls how it's displayed (in a long paralellagram shape with 2:3 ratio). Annoyingly though the layout is placing a grey line top and bottom, which I can't remove even by uploading a PNG with a transparent background, which suggests it's baked into the layout i've chosen. Is there a way to hide this background, please? Attached a screenshot of what I mean. See line above and below the green block image. Hi, try adding this code to custom css (Design > Custom CSS) and let me know how it goes 🙂 .sqs-block-image .design-layout-card .image-overlay { background-color: transparent; } Please give this a 👍 if it helps www.sevenstars.studiowww.instagram.com/sevenstars.studio Link to comment
joessqsp Posted March 17, 2022 Author Share Posted March 17, 2022 11 hours ago, Jia said: Hi, try adding this code to custom css (Design > Custom CSS) and let me know how it goes 🙂 .sqs-block-image .design-layout-card .image-overlay { background-color: transparent; } Thank you for your response - unfortunately it didn't work! 😞 Link to comment
Solution Jia Posted March 17, 2022 Solution Share Posted March 17, 2022 12 minutes ago, joessqsp said: Thank you for your response - unfortunately it didn't work! 😞 Ahh, try adding the important tag, like this: .sqs-block-image .design-layout-card .image-overlay { background-color: transparent !important; } Please give this a 👍 if it helps www.sevenstars.studiowww.instagram.com/sevenstars.studio Link to comment
joessqsp Posted March 17, 2022 Author Share Posted March 17, 2022 4 minutes ago, Jia said: Ahh, try adding the important tag, like this: .sqs-block-image .design-layout-card .image-overlay { background-color: transparent !important; } Fantastic, that did it! Thanks - I should have thought of that. 😂 Thanks so much for your help. Jia 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