Debut Theme - Images Squashed on Responsive Mobile

Solved
Tourist
4 0 0

I am having an issue with images resizing on mobile view. Specifically images that are uploaded as a blog post's "featured image," or a product image viewed on the product page on a mobile device. All other images that are uploaded in place within the body content blocks seem fine, but those that are uploaded into these two areas get squashed in mobile view.

I'm not sure where to go to correct this, as it's not a setting found within the blog post or product editor pages.

IMG_4566.PNGMobile - product image shrinksIMG_4567.PNGMobile - product image shrinksIMG_4568.PNGMobile - blog image shrinksIMG_4569.PNGMobile - blog image shrinksb56c1bfa-3a33-4913-8a90-c0a121e5e053.pngDesktop - images are correct proportions

0 Likes

Success.

Navigator
358 39 40

the issue is your articles have css which is squashing images to height 150px, please add given css at the end of theme.scss file and we check 

 

@media screen and (max-width: 749px){

.article__grid-image {max-height: initial !important;}

}

you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes
Tourist
4 0 0

That fixed it -- thank you so much!

 


@suyash1 wrote:

the issue is your articles have css which is squashing images to height 150px, please add given css at the end of theme.scss file and we check 

 

@media screen and (max-width: 749px){

.article__grid-image {max-height: initial !important;}

}


 

0 Likes
Tourist
4 0 0

Well, that fixed it for the Blog pictures, but not for product images apparently. Would I enter this same code somewhere else to fix squashed images in products? @suyash1 

0 Likes
Navigator
358 39 40

@bseeber wrote:

Well, that fixed it for the Blog pictures, but not for product images apparently. Would I enter this same code somewhere else to fix squashed images in products? @suyash1 


add this at end and we check

@media screen and (max-width: 749px){

.product-featured-img{max-height: initial !important;}

}

you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
1 Like
Tourist
4 0 0

Thank you again for your help! That seems to have fixed the issues.

0 Likes
Navigator
358 39 40

@bseeber wrote:

Thank you again for your help! That seems to have fixed the issues.


great... you are welcome to support me.

you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes