Solved

Featured Product's Image doesn't fit inside frame

palettepaws
Excursionist
14 0 7

Hi, all. Can someone help to inspect my page's featured product section?
The image doesn't fit the frame,

error2.PNG

 

As you can see, there is a white area under the featured product's image, and it's supposed to be the image stretched to fill the white spaces.
If any experts know how to solve this, please let me know if there's a solution for this. Appreciate much! 

Here is the details of the website.
https://www.palettepaws.com/
password: cheath

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
8012 1561 1586

This is an accepted solution.

Please update code and check again

<style>
.featured-product .grid__item.product__media-wrapper { 
    position: relative; 
}
@media screen and (min-width: 750px) {
.product-media-container.media-fit-cover, .product-media-container.media-fit-cover .product__modal-opener, .product-media-container.media-fit-cover .media {
    position: absolute;
    width: 100%;
}
}
</style>

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 5 (5)

Dan-From-Ryviu
Shopify Partner
8012 1561 1586

Please add this code to your Online store > Themes > Edit code > open theme.liquid, add this code below before </head> tag

<style>
.featured-product .grid__item.product__media-wrapper { 
    position: relative; 
}
.featured-product .product-media-container.media-fit-cover .media {
    position: absolute;
    width: 100%;
}
</style>

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

palettepaws
Excursionist
14 0 7

Hi, @Dan-From-Ryviu 

Thank you so much for trying to help!
I've tried the code above, but nothing seem to change after applying the code.
error4.PNG
Do you know what could be the issues?

Dan-From-Ryviu
Shopify Partner
8012 1561 1586

This is an accepted solution.

Please update code and check again

<style>
.featured-product .grid__item.product__media-wrapper { 
    position: relative; 
}
@media screen and (min-width: 750px) {
.product-media-container.media-fit-cover, .product-media-container.media-fit-cover .product__modal-opener, .product-media-container.media-fit-cover .media {
    position: absolute;
    width: 100%;
}
}
</style>

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

palettepaws
Excursionist
14 0 7

It works perfectly. Thank you so much for helping out! 

Dan-From-Ryviu
Shopify Partner
8012 1561 1586

Glad I could help. 

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.