[Resolved] Feaured Services circle width

Hello Richard, we tried to simplify the sizing option into one setting, so to change this you would need to add some custom CSS and start with a desired width for the outer circle and then use this to work out the sizing and positioning of the inner circle and the icon/image size.

For example, if you want the outer circle to be 160px x 160px, the theme would calculate and use this CSS:

.featured-post .featured-icon {
    width: 160px; /*outer circle width*/
    height: 160px; /*outer circle height*/
    font-size: 80px; /*inner icon size*/
    line-height: 156px; /*line height for the icon font, 4px less than outer circle because border is 2px thickness top & bottom*/
    margin-top: -98px; /*positioning of outer circle on the top of outer box*/
}

.featured-post .featured-icon img {
    width: 96px; /*width of image when using image instead of icon*/
    margin-top: 32px; /*vertical positioning of image within outer circle*/
}

The comments wrapped with /**/ are there as a guide to show what each value represents.

Feel free to change any or all of the values in the above CSS to achieve the look you want and write it to ‘Customize’ > ‘Additional CSS’