GROCreativeStudio Posted March 7, 2023 Share Posted March 7, 2023 #block-4a001f40286d8404a12a { border-radius: 30px 30px 30px 30px; outline: solid 2px #887569} This is the code I used for the image that pairs with my "The Website in a Week" package on my web design service page. It's showing up perfectly fine in the mobile display within Squarespace, but when I check the live site on my phone, the border outline isn't rounded to match the image (attached a screenshot). My image is set to fill and the corner radius within fluid engine is set to 30px. Link to comment
Solution GROCreativeStudio Posted March 7, 2023 Author Solution Share Posted March 7, 2023 Never mind, I fixed it! I just changed "outline: solid 2px" to "border: solid 2px". Also, just realized I only had to type "border-radius: 30px" rather than typing 30px 4 times😅 Oops, still learning! But I figured I'd leave it up here in efforts to help someone else😁 tuanphan 1 Link to comment
GROCreativeStudio Posted March 7, 2023 Author Share Posted March 7, 2023 #block-4a001f40286d8404a12a { border-radius: 32px; border: solid 2px #887569} Here's the final code. I ended up adding 2px to the border radius in the code so there wasn't a gap in the corners. So you'd set the image design within Squarespace's fluid engine to fill and edit the corner radius to 30px, then paste the above code in the custom CSS section. Hope this helps you if you're currently trying to solve this problem! 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