How to edit image display size in image-with-text

Store Design
1

Hi!

Would anyone know what code to add to change the round images at the bottom of this page to display smaller? I’m using the dawn theme. I’d like all of the round images to display at 200px wide / original size, no matter the media it’s viewed on.

https://vgg74xwxoqwtifs5-62332600570.shopifypreview.com/pages/our-story

I’ve tried to edit the base.css file but I’m not having ANY luck.

Thanks!

Jamie

2

@jamieism ,

This is the original size , see here…

oscprofessional_0-1644566118600.png
oscprofessional_0-1644566118600.png1722×902 156 KB

3

@jamieism - please check by adding this css to the very end of your base.css file

#shopify-section-template--15677747495162__16445636995a0d90d5 .image-with-text__media-item{width: 200px; height: auto; max-width: 200px; position: initial; margin:0 auto;}

suyash1_1-1644570973120.png
suyash1_1-1644570973120.png1366×768 186 KB

4

Unfortunately, this doesn’t work for me. It just crops the first image on the sides so it looks really weird.

jamieism_0-1644599401405.png
jamieism_0-1644599401405.png1920×1040 251 KB

5

Oscprofessional, yes, I want the images to show up that size, but on my browser (chrome) they’re blown up huge.

jamieism_0-1644599501606.png
jamieism_0-1644599501606.png1920×1040 249 KB

6

Okay, I’ve managed to get them the right size, but now they’re out of alignment. The alignment was perfect before but now on desktop they’re up really high.

7

@jamieism ,

.color-background-1 {
  align-items: center;
}

Use this css