Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Border image radius has weird effect

  • Hi,

    I recently created topic about border radius on images has no effect. The support helped me but I am still having issues with few images. It seems like border radius works only for one corner of few images. You can see it at section “Best Hotels in/on” – https://themanduls.com/blog/12-best-siargao-beaches-complete-guide/ but in different blog post it’s working just fine like here – https://themanduls.com/blog/weligama-beach-sri-lanka-complete-guide/. I just copied the same container from the page where it’s working well. I have no idea what could be wrong here. Thanks for helping me.

  • Hi there,

    so is related to the previous issue, as the image converter moves the GB Classes from the <img> to the injected <html> element.
    So in your Image Block Settings you have defined a Width and Height of 250px.
    Due to the converted it sets the <picture> to that size.

    But the <img> inside it is only 200px x 200px so it doesn’t fill the box and therefore you don’t see the border radius on it….

    Option A
    Adjust the Image Block settings so the width and height are no greater then the image they contain eg. 200px.

    Option B
    Add this CSS:

    
    picture img {
        width: 100%;
        height: auto;
    }
    

    This will force any picture img to fill the space.

  • Thank you very much David! You are great.

    CSS code fixed the issue.

    Wish you a lovely day.

  • Glad to hear that.
    And you too!

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.