How to make all blog images the same width and height?

Solved
apalacio
Excursionist
23 0 8

Hello!

 

When I look at my blogs page, each image has a different height a width.  Is there any way to force all blog images to have the same width and height so that there is consistency in the page?

Screen Shot 2022-03-29 at 8.49.41 AM.png

Website:  Mokai

Accepted Solution (1)
AvadaCommerce
Shopify Partner
3879 837 847

This is an accepted solution.

Hi @apalacio ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css->paste below code at the bottom of the file:

.features--image-zoom .article-item img {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

AVADA - Top Rated App for Email, SMS, Popups


Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE

View solution in original post

Replies 3 (3)
MS_WEB_DESIGNER
Shopify Expert
695 52 135

Hi @apalacio,

I am Ani From https://www.task4store.com/  - Shopify Small & Custom Tasks Experts ( By MS Web Designer - Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore )

Here are the Solutions!

Go to Online Store->Theme->Edit code

Asset->/theme.css ->paste the below code at the bottom of the file.

 

.features--image-zoom .image-zoom img {
    height: 250px;
}

 

 

If you have any concerns feel free to ask me!

Regards,
Ani

MS Web Designer  | Top Rated Shopify Experts in Singapore
20,000+ Tasks Completed | 1500+ Happy Clients

Want to Improve Shopify Store Speed, Redesign or custom changes, or Small tweaks on store hire me.Try Our Free Shopify App
If helpful then please Like and Accept Solution

AvadaCommerce
Shopify Partner
3879 837 847

This is an accepted solution.

Hi @apalacio ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css->paste below code at the bottom of the file:

.features--image-zoom .article-item img {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

AVADA - Top Rated App for Email, SMS, Popups


Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE

apalacio
Excursionist
23 0 8

Worked perfectly!  Thanks for being so helpful 🙂