How to create Round Images in Flex Block

Posted in: Newspaper
Post count: 31
dumagroup
#227340
Apr 7, 2018 at 1:56 am

Hi there,
I was wondering if there could be a guide on how to create the round images like it is shown in your Flex Box Demo.

Andrew

Post count: 1043
ctoweett
#227398
Apr 8, 2018 at 12:08 am

You can set the rounded feature using the border-radius css property. For example, the flex block 1 demo uses this code 

.td_module_flex_1 .td-thumb-css {
    border-radius: 15px;
}

You can paste that into your custom CSS section and play around with the number of px to get the desired effect. You can even change the number from px to % e.g.

.td_module_flex_1 .td-thumb-css {
    border-radius: 5%;
}

There is also the option for border-radius in the CSS tab of the flex block element (when editing with td composer, just click the CSS tab at the top and scroll to see border-radius. I tried to test from there but the block images were not responding. Maybe you can try both solutions and choose the best for you.If you want to change any other block, just look for its CSS class using the browser inspect element and then test the border-radius.

NB: if you need the completely round images, just change the border-radius to 100%.

Viewing 2 posts - 1 through 2 (of 2 total)
The forum ‘Newspaper’ is closed to new topics and replies.