Change Icon size in Icon with Text section on Product Page - Dawn Theme

Store Design
, , , ,
1

Hi,

I’m using new V12 of Dawn theme. Have added icon with text section to product pages and uploaded my own .png image to use however how do I increase the image sizes, please?

I’ve looked in the icon-with-text.liquid file however height and width are set to “auto”, I don’t know what auto size is.

Also, I’m guessing the size will possibly be different on mobile & desktop - don’t want to make it look oversized on mobile either.

Thank you in advance.

2

Hi @ed_bb ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

1 Like
3

Hi @BSS-Commerce

https://baileybespoke.co.uk/products/the-v-ring

See link - the 2 icons field under product price is which I am referring to. Hope you can help. Thank you.

4

Hi!

First of all, I don’t know anything about coding, however, I learned a few patterns thanks to this forum and I managed to find the answer to your question - I wanted to do the same thing. I don’t know if this is the best possible option, BUT:

-go to the theme.liquid

-right before paste:

 .icon-with-text__item img {
height: 50px;
width: 50px;
}

You can adjust the px as you like, 50 is perfect for me.

5

Hi @ed_bb

Insert this css snippet into your css file:

.icon-with-text .icon-with-text__item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

With object-fit: cover so that when stretching the screen, it will not break or lose part of the image

Hope it helps @ed_bb

2 Likes
6

Thank you very much, worked really well :slightly_smiling_face:

7

I added the provided code in my theme.liquid in this way

li.icon-with-text__item span { font-size: 10px; } .icon-with-text .icon-with-text__item img { width: 50px; height: 50px; object-fit: cover; }

But it is not doing anything. Can someone tell me what I did wrong? I thought I was following the unclear steps of the given solution.