Hero image not proper on mobile

Shapely
1

Sir my hero image in the mobile platform is not properly visible. How should I resolve this issue? Please help me. My website is: www.mangaindia.in

2

Hi @akuro,

I hope you are well today and thank you for your question.

This is default functionality of parallax effect.

You can make it better by adding the following CSS code in the Custom CSS option of your theme on the below path but this will display some white space below the hero image on mobile browsers.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

@media (max-width: 760px){
#shapely_home_parallax-2 .parallax-window.fullscreen {
    background: url("http://mangaindia.in/wp-content/uploads/2016/03/1685752-e1459861832552.jpg") no-repeat #fff;
    background-size: 100%;
    height: 69vh;
}

#shapely_home_parallax-2 .parallax-window.fullscreen .align-transform{
  top: 25%;
}
#shapely_home_parallax-2 .cover.fullscreen{
  height: auto !important;
}
}

Best Regards,
Movin

3

Sir I tried using the above snippet but it had no effect.
Also I accessed through another browser and the hero image was perfectly fine in one but incomplete in the other. Sir please refer the attached images.

4

I visited your site but didn’t see the provided custom code added in it.

Where have you added it?

5

I’ve tried adding this CSS to my site as the hero image isn’t responsive. It’s definitely helped but still not resolved.

I’ve checked it on responsinator which claims the hero image resizes on most devices:

thefoodwife.co.uk

But not on “ipad portrait” (second from bottom), and in reality this is what it looks like on my Android device.

In addition the other full-width images on my homepage aren’t responsive at all at present. Is there some CSS that will resolve all of them?

Thanks,
Jim

6

hi Jim

Please kindly open a new ticket (and if im not wrong you already have opened a new ticket, i remember your website)
i cant help you here