Header images not mobile responsive

[Lucas4ever]

Everything works perfect but when I open the webpage in a mobile the header image photo is not reduced to the mobile format, it is just the same photo but you can only see a very small portion due to the size (basically it looks bad).
In the website here https://alidropship.com/themes/ the photos in the mobile features does show different. I wonder if this is an error or is there any way to fix it. You can check the link to my website here https://catnipworld.com/

Thank you for you help, Regards

Lucas Vicente

 

[Ekaterina Sayapina]

Everything works perfect but when I open the webpage in a mobile the header image photo is not reduced to the mobile format, it is just the same photo but you can only see a very small portion due to the size (basically it looks bad).
In the website here https://alidropship.com/themes/ the photos in the mobile features does show different. I wonder if this is an error or is there any way to fix it. You can check the link to my website here https://catnipworld.com/

Thank you for you help, Regards

Lucas Vicente

Hello Lucas,

The Michelangelo is mobile responsive, however, you need to take into consideration image requirements when choosing slider pictures. Some limitations should be introduced to ensure that your website is mobile friendly.

 

[Lucas4ever]

Thanks @Ekaterina Sayapina , can you give me those limitations to be introduced besides the sizes that the theme recomends so I can add it to my website? Thank you!

 

[Ekaterina Sayapina]

Hello Lucas,
You may check image (slider) size requiremenets in Customization => Home. Despite the fact that these limitations apply to the desktop version of your website, you should choose slider images that can be adjusted on mobile as well.

 

[Lucas4ever]

Thanks @Ekaterina Sayapina , the images in my page are image - 0 (size: 960px x 400px). But the iimage in the mobile still shows on 960*400px

 

[Lucas4ever]

Here are the examples.

 

[Ekaterina Sayapina]

Here are the examples.

Thanks for providing the details! You should choose slider images keeping in mind how they will look like on mobile devices as these are the same images for the desktop and the mobile version of your website.

 

[Real Residual]

Add this in your Customization > Head > Css styles

.slick-slide img {

height: 100%;
width: 100%;

}

So it will display 100% no matter what. Just a quick CSS fix.

 

[firdaus]

why is it that in mobile and ipad the font is in white color and in desktop the font is in black color

 

[Ekaterina Sayapina]

why is it that in mobile and ipad the font is in white color and in desktop the font is in black color

This color solution is based on user experience research.

 

[Tanvika]

I am also having the same issue where header image is not responsive? Is there any solution for this? Thanks in advance for your help on this.

 

[Direct Webstore]

I am also having the same issue where header image is not responsive? Is there any solution for this? Thanks in advance for your help on this.

Read all the posts in this thread.

 

[FHC]

Add this in your Customization > Head > Css styles

.slick-slide img {

height: 100%;
width: 100%;

}

So it will display 100% no matter what. Just a quick CSS fix.

No change in my mobile.

 

[Direct Webstore]

No change in my mobile.

Did you clear the cache in your phone's browser? (e.g Settings>App Manager>Your Browser or whatever...)