Editing the Size of Article featured image in theme IRA

Highlighted
Tourist
4 0 1

Urgently need to edit the size of my featured images in article (Blog Posts) in the new updated theme IRA. The blog posts are driving me crazy with the featured image showing in its full pixel size and doin weird things on desktop and mobile screen. An edit to the theme code of article.template.liquid would help put dimensions or an app. Any help is greatly appreciated.

0 Likes
Highlighted
New Member
1 0 0

Hi Sandhya! 

Looks like you may be in touch with our theme support about this, but just noticed that you posted this so I thought I'd throw this here-

Open up the style.scss.liquid file in the Assets folder, and scroll to the bottom. Paste this in there:

 

img.article-feature-image {height: 50vh;object-fit: contain; margin: 0 auto; width: 100%;}

 


 The '50vh' means it will be 50% of the viewport (window) height. You can adjust that to whatever value you'd like.

"object fit: contain" means the image won't get cropped, but will size up the width to fit the height and show the whole image.

"margin: 0 auto;"  and "width: 100%" work to center-align the image. 

 

I hope that helps!  - Kyle (Fluorescent support)

0 Likes
Highlighted
Tourist
4 0 1

Hello Kyle, Thank you for this wonderful solution. The feature image is now perfect on desktop blog but still not on on mobile blog. Is there a solution that works for both screens. As 60% website visitors are mobile users, the images needs to look right on mobile I am attaching a screenshot of the same.

2. Also is there a way to show images in the blog post/ article at a better size? Right now the images are small, is there a way to show the image in full center grid but in vertical size and format instead of a square.

 

Thank you, I am happy with the above solution but only for desktop, I wish it did the same on mobile phone, if you know what i mean.

 

Screen Shot 2020-10-29 at 2.49.15 PM.pngScreen Shot 2020-10-29 at 2.49.12 PM.pngScreen Shot 2020-10-29 at 2.49.07 PM.pngScreen Shot 2020-10-29 at 2.49.00 PM.png

0 Likes