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 - 

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

[Sangeetanahar]

Hello @Phreshcareco 

1.Go to online store ---------> themes --------------> actions ------> edit code------->assets.............>base.css

	.review_slide .banner__heading {
    width: 75px;
    height: 75px;
    margin: 0 auto;
    border: 5px solid #181e40;
    border-radius: 100%;
    font-size: 50px;
    padding: 13px;
    text-align-last: justify;
}

result will be

add this code at the end of the file

If my solution is up to you then mark accept solution

thanks

[Sweans · Accepted solution]

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