I want to put a circle around a heading.

[Phreshcareco]

Hey guys,

Url - www.phreshcareco.com.au

I want to put a circle around the ". I would like the " to be white and the circle fill to be #181e40.

Can anyone help me with this please?

[saim007]

@Phreshcareco You want like this -

[Sweans]

Hi @Phreshcareco ,

You can achieve the desired result by simply adding the below code to a specific line in the base.css file of your shopify theme.

You can follow these steps to do that:

Step 1: Open the base.css file

Go to Shopify backend→ Sales Channel → Online Store → Themes → click the three dots near your active theme → Edit code → Search for base.css in the search section(See the screenshots below):

Step 2 : Add the code block

Add this code block to the bottom of the base.css file .

.banner__box.content-container .slick-list.draggable .banner__heading.inline-richtext {
  width: 60px;
  margin-inline: auto;
  border-radius: 100vw;
  aspect-ratio: 1 / 1;
  background: #181e40;
  color: white;
  height: 60px;
  line-height: 1.3;
  text-indent: -14px;
}

Once this is done you will have a result like this :-

If you found this helpful, leave a like and choose this as the accepted solution,

If you have any other queries feel free to ask me as well.

Regards,

Sweans

[Phreshcareco]

Hey mate,

Thats exactly what i want, is there any way we can edit the size on the circle in the css?

[saim007]

@Phreshcareco Below is the code, you can put this code in the end of your base.css or in your custom.css if you have-

.review_slide .banner__heading {
    border: 1px solid #fff;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    background-color: #181e40;
    color: #fff;
    margin-inline: auto;
    aspect-ratio: 1;
    line-height: 1.4;
    text-indent: -12px;
}

For increase and decrease the size of the circle you can increase/decrease the width and height in the css code.

Please let me know when works!