Making a square image circular, set size and responsive on different devices

[JHarrisQV]

Hey,

I am testing out a new theme for my website, I want to make a square image to appear circular. The block type is a rich text block where the image is on the left and the text on the right.

I want the image to be a more manageable size but also, responsive so where the size of the webpage adjusts, so does the image size and placement. When using desktop, image on the left of the text, but then on mobile and smaller devices, it appears above the text.

See screenshot below of what I wish to achieve (first pic) vs, what I currently have (main focus being on the image).

On my previous version of my site, I used the below code provided by someone, but was unsure how to adjust. I am using a paid theme called Kingdom is that is important info to anyone. I was unsure of the full process to change the code from my previous version of my store to this new one. As the block is now a rich text block.

body .section-template--19108204183852__3477944b-2649-4a7d-b231-588021b5fb79-padding .image-with-text__media{
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

body #shopify-section-template--19108204183852__3477944b-2649-4a7d-b231-588021b5fb79 img{
	max-width: 250px;
	max-height: 250px;
	margin: 0;
	position: static;
	border-radius: 50%;
}

Thanks in advance,

Regards,

Jonathan

[Laza_Binaery]

Hi Jonathan

It is a bit difficult to guess without a link to your test theme and password if you have one.

But you can try this way. Your rich text block has, in the settings panel on the bottom, the Custom CSS section.

There you could try the following code:

.image-with-text__media{
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

img{
	max-width: 250px;
	max-height: 250px;
	margin: 0;
	position: static;
	border-radius: 50%;
}

But the first part depends if there is a div element with the class “image-with-text__media” that wraps your image.

[JHarrisQV]

Hey @Laza_Binaery ,

Thanks for getting back to me, I appreciate the difficulty without a sample site. I am merely playing around with the site right now before purchasing the theme, so wanted to check I could get everything working first before splashing the cash on the theme.

Try this link, it should work and show the right theme.

https://nj1qc06crltz7jha-66843214124.shopifypreview.com

Your code worked exactly as intended, however it now presents a grey background behind it and places the image in the top right. I’m keen to either place centre right, but remove the grey background.

If you could take a look, i’d be hugely appreciative.

Thanks in advance.

Jonathan

[Laza_Binaery]

Hi @JHarrisQV

Remove the previous code and try this one

.rich-text__media figure {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
 } 

  .rich-text__media img {
    max-width: 25vw;
    max-height: 25vw;
    margin: 0;
    position: static;
    border-radius: 50%;
 }

[JHarrisQV]

Hey @Laza_Binaery ,

This is amazing, thank you so much for your help. I really appreciate it!

Have an excellent remainder of your day!

Jonathan

[Laza_Binaery]

Thank you.

Have a nice day too.

[MRamzan]

You can make an image circular:

How to create Circular thumbnails on Product Page of Shopify Store? Quick & Easy