Jump to content

Rounding Inline Image Blocks

Recommended Posts

  • Replies 5
  • Views 682
  • Created
  • Last Reply
Posted
On 4/22/2021 at 10:32 PM, Adaptive said:

Site URL: https://www.corehomesuk.com/home

Hi folks,

I have hand cranked some blocks on the homepage of this website but can't figure out how to round the tops of the images... I had added some CSS through targeting the image block ID but its not working... any ideas?

Try set overflow hidden, eg.

#block-yui_3_17_2_1_1619101671073_6494 {
    border-radius: 30px !important;
    padding: 0px 10px 0px 10px !important;
    overflow: hidden;
}

 

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

Posted
On 4/24/2021 at 1:52 PM, tuanphan said:

Try set overflow hidden, eg.


#block-yui_3_17_2_1_1619101671073_6494 {
    border-radius: 30px !important;
    padding: 0px 10px 0px 10px !important;
    overflow: hidden;
}

 

Hmmm, thats odd. It seems to have a worked a bit but they seem to be squashed?

Posted
On 4/27/2021 at 4:34 PM, Adaptive said:

Hmmm, thats odd. It seems to have a worked a bit but they seem to be squashed?

Use this code

div#page-section-607eb92910485805e7899ebe .image-block-wrapper {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

image.thumb.png.fde048cbabb211f1a3ceadc3d42c7499.png

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

  • 2 weeks later...
Posted
On 4/28/2021 at 12:01 PM, tuanphan said:

Use this code


div#page-section-607eb92910485805e7899ebe .image-block-wrapper {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

image.thumb.png.fde048cbabb211f1a3ceadc3d42c7499.png

That has worked a treat thanks!

Posted
On 5/11/2021 at 10:43 PM, Adaptive said:

That has worked a treat thanks!

Do you need help on these?

Site URL: https://www.corehomesuk.com/home

1. (Tablet-Homepage) Increase text width?

corehomesuk.com-home-01-min.png

2. (Tablet-Footer) Increase logo size, text width?

corehomeuk.com-home-02-min.png

3. (Mobile-Footer) Reduce logo size?

corehomeuk.com-home-03-min.png

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

corehomeuk.com-home-04-min.png

5. (Mobile-Homepage) Remove a line above button?

corehomeuk.com-home-05-min.png

6. (Mobile-Homepage) Add a space on top of text?

corehomeuk.com-home-06-min.png

7. (Mobile-Residents)

corehomeuk.com-home-07-min.png

8. (Mobile-Residents) Reduce images size?

corehomeuk.com-home-08-min.png

9. (Tablet-Residents) Reduce text size?

corehomeuk.com-home-09-min.png

10. (Tablet-Residents) Reduce text size, increase text width?

corehomeuk.com-home-10-min.png

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.