Banner image on homepage slider showing wrong on mobile

Hello, I’m a relatively new user of WP.

My broblem is that, only on the mobile version of my website i see the image on the slider really small, I think that the problem is caused by the spacing on the left border (300px), wich is necessary on the desktop version of the website because otherwise the category drop down menu will go over the image on the slider.

So how can I deal with that problem, maybe have two separate settings for mobile and desktop, I don’t know.

I also use WPbakery page builder and revolution slider plugins.

Thank you.

Hello,

I have test your site on the mobile device. And your slider images looks just fine you can check in the below screenshots:

https://jmp.sh/QOGSlA5
https://jmp.sh/tJcyHAL
https://jmp.sh/aC6ydYT

You can use different settings for mobile and desktop by editing your slider with the slider revolution and then select any of the layer or image and go to responsive option as in the screenshot: https://jmp.sh/iZRBfsc

Best Regards.

Hello Aizaz,

Sorry we had a problem right now, our site template was replaced by the stock one, we are restoring a backup at the moment.

Anyway I will try the suggestion of using the slider revolution settings and let you know.

Thanks

Hello,

Sure, We are always here to help you. Take your time.

Best Regards.

Ok the, website now it’s fine, and the banner is not even showing on mobile right now (I mean the first two slider with the image).
I also noticed that the Slider is not from “Revolution Slider” but it’s a regular one from the theme itself I think.

Regards.

Hello,

As your slider is not showing 2 specific slides from the set of slides in the mobile view. And you are using the theme default slider.

First edit your homepage with Wp-Bakery page builder and see the name of slider which you are using currently after that click “Slides” from the dashboard option and find those specific slides which are not showing in mobile view. Once your found them just edit both of them one by one and click on the main column of those slides and uncheck the box “Hide on device” for mobile screens under “Responsive Options” and hit save changes and then update your page.

Screenshot: https://jmp.sh/wrzebuo

Best Regards.

Hello,

The boxes are already unchecked

And actually the slider show up as blank, the only thing is that I can’t see the image from the media library.

I think the problem its beacuse of the spacing in the css box, is it possible to overhide it on the mobile maybe?

Thanks for the really fast reply.

Regards

Attachments:

You must be logged in to view attached files.

Hello,

Kindly provide your site admin login details so I can access your admin area and check your slides setting and margins and help you out.

Best Regards.

Ok here you have the admin account, thanks

The slides with the problem are “(Skyport Promo)” and “(Solix x Braincamp)”

Hello,

Your provided login detail is not correct. Kindly provide the correct login credentials so I can help you to display the slide images in the mobile view.

Screenshot: https://jmp.sh/wNe1BK9

Best Regards.

Ok, sorry here you have…

Hello,

You can use the custom class for margin and then used that class for only desktop screens.

In this way your slides will not disappear in the mobile view. First of all remove your margin from your design options tab.
Then create a class as “leftPadding” you can check in the below screenshot:
https://jmp.sh/iyUNwIs

Now paste the below code in Theme Settings >> custom code >> Custom CSS for desktop
https://jmp.sh/mDPOVxR

Result in desktop:https://jmp.sh/kMJWlOt
Result in mobile: https://jmp.sh/uoC1IFU

Best regards.

Hello,

Everything is done, not the best result but it’s ok.

Thank you so much, good support.

Regards

Sound’s Really Great!..

Feel Free to write back if you need further assistance, I’ll be more than happy to help you out.

Have a Fantastic Day.

Topic Closed.
Best Regards.

[Author]

Posts