Solved

How can I resize multi-row images in the Dawn theme?

Ell_Soll
Pathfinder
95 0 24

Hi

There is a way to make the Multi Row images smaller?

I tried through my theme customization but it didn't go well because it makes the image not full width.

 

How I can change the size through code?

 

ellsoll.com

 

Untitled.png

Accepted Solution (1)
Jasoliya
Shopify Expert
4817 623 1223

This is an accepted solution.

Css is not loading on page

try to add in layout/theme.liquid just before </head>

<style>
.image-with-text__media img{max-width: 500px; max-height: 500px; margin: auto; right: 0; bottom: 0;}
</style>

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 12 (12)

Jasoliya
Shopify Expert
4817 623 1223

Hi @Ell_Soll 

For that you can use this fast solution,

Follow this:
1. Go to Online Store->Theme->Edit code
2. Asset->base.css > paste bellow code in bottom of file

.image-with-text__media img{max-width: 500px; max-height: 500px; margin: auto; right: 0; bottom: 0;}

Note: it will work for all image with text section,

- you can change max width and max height in css as you want small or big.

 

Best regard

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Ell_Soll
Pathfinder
95 0 24

Hi thanks for your reply but it's not work.

I have multirow, not image with text.

Jasoliya
Shopify Expert
4817 623 1223

This is an accepted solution.

Css is not loading on page

try to add in layout/theme.liquid just before </head>

<style>
.image-with-text__media img{max-width: 500px; max-height: 500px; margin: auto; right: 0; bottom: 0;}
</style>

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Ell_Soll
Pathfinder
95 0 24

Perfect!

Thank you.

Jasoliya
Shopify Expert
4817 623 1223

I can see one css override by store css so remove old one and add this new

<style>
.image-with-text__media img{max-width: 400px !important; max-height: 400px; margin: auto; right: 0; bottom: 0;}
</style>

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Finlay101
New Member
7 0 0

This worked for me. However, the previous width of the image is visible by lines on each side. How do I get rid of this

Jasoliya
Shopify Expert
4817 623 1223

  have you added code? i cant see in front side? 

add it and let me know will check

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Ell_Soll
Pathfinder
95 0 24

Added.

Check now.

Finlay101
New Member
7 0 0

This worked for me. However, the previous width of the image is visible. 

Jasoliya
Shopify Expert
4817 623 1223

send me store url will check

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Finlay101
New Member
7 0 0
Mikson39
Visitor
1 0 0

Could you tell me how you solved problems with white stripes on the top and bottom of image?