[inspiredbymj.co.uk]

Hello, we’re having an issue with the slider at the top of the homepage.

We replaced the stock image with one of our own that matches the same dimensions etc as the original.

When we view it on Desktop it looks great (you can see it here – http://www.inspiredbymj.co.uk)

But when we view it on Mobile/Tablet only the background part of the image is displayed (because half the image is just background, the other half is the image with the woman on just like the original) and I can’t see a way to set the background position. It looks like this on mobile:

If you view the website on desktop ( you can see what it’s supposed to look like.

Is there any way I can make this image fit (or display correctly) on mobile and desktop?

I saw another website (sahacarolina.com) that is using you theme and they seem to have fixed the problem with a “grosso-zoomable-background” class. If you look at their website on mobile the header/slider looks fine.

If you can help me or suggest another way where we can have this header image look good on desktop and mobile that would be great. We don’t even really need it to be a slider, but I’d like to keep this site looking as close to your demo site as possible.

Many thanks!

[inspiredbymj.co.uk]

Hello, any updates in this please?

Many thanks

[Alex]

Hello inspiredbymj.co.uk,

Unfortunately our team member which can help you with the issue is currently sick. Please allow a bit more time.

Regards,
Alex

[inspiredbymj.co.uk]

Ok thanks

[Althemist]

Hi inspiredbymj.co.uk,

Sorry for the late reply.

This is not theme related. It looks like you set the row element in the slider to be hidden on mobiles in the responsive settings of the row.

[inspiredbymj.co.uk]

Hi, no, I only did this yesterday to hide the slider altogether on Mobile but it didn’t work.

I’ll revert it back right now so please have another look and see if there’s anything you can do.

Thanks

[inspiredbymj.co.uk]

Essentially I just want to know if it’s possible to set the background position so that the main part of the image is shown on a mobile device. If you look now for example on Mobile you’ll see that only a part of the background of the image is shown, but the main image is of a woman wearing sunglasses. On a PC you can see the whole picture an looks great, on Mobile you can’t see any of the woman at all, just part of the background which has no relevance and looks terrible.

How can I set the background image position so that the part of the image shows well on a mobile device? (please also read my comment above if you missed it, I only set the slider to ‘not show on mobile’ yesterday because it looks terrible at the moment, but even that didn’t work and it still had a huge white space when I removed it. I’ve now changed it back so if you check now on mobile device you will see the problem.

Many thanks

[Althemist]

No, I am afraid you can’t manipulate the background position on different devices. It’s just an image background set to “cover”.

If you need full control you’d need to use a dedicated slider plugin like the “Slider Revolution” (included with the theme).

[Author]

Posts