Main page images are not aligned for phone view

[Anna65]

Hello there!

I enabled everyone to see my webshop when I realized that the phone view is not how the laptop view is. For example, my images are cut, as you can see in the picture. The first picture is from the phone view (wrong), and the second is from the laptop view (how I would like it to be). Does someone know if it is possible to fix this? 

Thank you so much.

[PageFly-Victor]

hi @Anna65 

This is PageFly - Free Landing Page Builder. I would love to provide my recommendations for your store.

About this problem with the mobile view, there are 2 way to solve this problem.
1. You can share with me the store live URL ( and password if password protected ) - I can check it on the page and try to use code to solve it

2. Is use another image to fit and responsive with both laptop and mobile

Hope this helps. 

Best regards,

PageFly

[Anna65]

Hi @PageFly-Victor 

Here is my store URL:

https://designmehair.nl/

Thank you 🙂

[Denishamakwana]

Please add below css code in bottom of assets/theme--critical.css file

@media only screen and (max-width: 767px)

.image--root[data-cover-mobile=true] img {

                height: auto;

}

Thank you.

[Anna65]

Hi @Denishamakwana 

Thanks for your answer! However, I don't see anything changing...

[Denishamakwana]

I check it in my device see attachment here.

Thank you.

[Anna65]

@Denishamakwana It looks like this in mine

[Denishamakwana]

Hi,

Please share your store URL and if your store is password protected then also provide password too.

Thank you.

[PageFly-Victor]

Hi @Anna65

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

 Go to Online Store--> Theme --> Edit code theme.liquid paste my code after </head> element

<style>

    @media (max-width:767px){

        #shopify-section-template--16397468762369__1661717623231a19d9 .featured-content--container{

        min-height:150px !important;

        padding:0 !important

}

#shopify-section-template--16397468762369__1661717623231a19d9 .featured-content--container img{

object-fit: contain !important

}

    }

</style> 

Best Regards;

PageFly

[Anna65]

Hi @PageFly-Victor 

Thank you so much! It works for the one I attached here (the pink one). I would also like it for the other ones on the main page tho and it didn't change for them. Is that possible?

Again, thank you!!

[PageFly-Victor · Accepted solution]

you can replace  by it

<style>

    @media (max-width:767px){

        #shopify-section-template--16397468762369__1661717623231a19d9 .featured-content--container,#shopify-section-template--16397468762369__1661717250230d0636.featured-content--container,#shopify-section-template--16397468762369__16401814158380a11c .featured-content--container{

        min-height:150px !important;

        padding:0 !important

}

#shopify-section-template--16397468762369__1661717623231a19d9 .featured-content--container img,#shopify-section-template--16397468762369__1661717250230d0636 .featured-content--container img, #shopify-section-template--16397468762369__16401814158380a11c .featured-content--container img{

object-fit: contain !important

}

    }

</style>