Jump to content

Full bleed image block cards and corner radius

Recommended Posts

Site URL: https://kangaroo-squid-e557.squarespace.com/new-page

https://kangaroo-squid-e557.squarespace.com/new-page password: seawolf

I'm trying to make floating cards, and I'd love the images to be full-bleed. I tried changing the padding to get the image full bleed, but that killed my corner radius for the upper right and left corners. I also had to add padding back in for the text portion, but I'm not sure what code to use - should I be using selectors like "p" or is there a squarespace ID?

Here's what I'm trying to do:  

image.thumb.png.40461c07c97de5226624ac52c72f69ec.png

Edited by KaijuCorgi
Link to comment
  • KaijuCorgi changed the title to Full bleed image block cards and corner radius
1 hour ago, KaijuCorgi said:

Site URL: https://kangaroo-squid-e557.squarespace.com/new-page

https://kangaroo-squid-e557.squarespace.com/new-page password: seawolf

I'm trying to make floating cards, and I'd love the images to be full-bleed. I tried changing the padding to get the image full bleed, but that killed my corner radius for the upper right and left corners. I also had to add padding back in for the text portion, but I'm not sure what code to use - should I be using selectors like "p" or is there a squarespace ID?

Here's what I'm trying to do:  

image.thumb.png.40461c07c97de5226624ac52c72f69ec.png

try

#block-yui_3_17_2_1_1621895142441_21593 img {
  border-radius: 5px 5px 0 0 !important;
}

image.png.9dc7419e0f59275c150b3d3a3af72ab5.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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

@KaijuCorgi The site has some. Do you need to fix these? We will support.

Site URL – https://kangaroo-squid-e557.squarespace.com/

1. (Mobile-Homepage) Move image on top of text?

kangaroo-squid-e557.squarespace.com-01-m

2. (Mobile-Homepage) Similar above

kangaroo-squid-e557.squarespace.com-02-m

3. (Mobile-Footer) Reduce logo size?

kangaroo-squid-e557.squarespace.com-03-m

4. (Tablet-Homepage) Increase text width?

kangaroo-squid-e557.squarespace.com-04-m

5. (Tablet-Services) Make title center?

kangaroo-squid-e557.squarespace.com-05-m

6. (Mobile-Services) Remove white space above images?

kangaroo-squid-e557.squarespace.com-06-m

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!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.