Documentation > WordPress > Plugins > WordPress Slider > Getting Started > Responsive Settings > Adjust Slider for Mobile Devices

Adjust Slider for Mobile Devices

By default our WordPress slider is responsive and will look good on any device be it a mobile phone, a tablet or a desktop. However, sometimes the content of your slides may be difficult to read and view on different devices: too small font for mobile view or overlaying layers, heavy videos. So you can adjust each slide to look properly at all devices. Below are steps to get this done.

  1. Under MotoPress Slider, find the slider you want to edit and click Settings.

    2. Slider first settings.png

  2. As soon as you enter Slider Settings, go to Size tab and check the boxes Slider size on Laptop, Tablet, Mobile. (If your slider needs improvement on certain device you can enable its size only)
  3. To make things easier for you we have already preset Width and Height values for each device, so they will appear automatically. Save the settings and you are ready to Edit Slides.

    4. Size settings +.png

  4. These settings enable a dropdown menu with layouts for each device in the slide editing screen. You can switch among them to rearrange the layers’ position, change font sizes, line heights, text alignment and whitespace for separate layers.

    5. Dropdown menu.png

  5. When you have chosen a device layout, by dragging you are able to move the layers and change completely the way they are viewed on different screen sizes. Pick a layer and under the slide you will see Style tab with Font Size, Line Height, Text Alignment and Whitespace fields that define styles for a particular layer on a particular screen type.

  6. Do not forget to save the slide when you are done editing. As a result your slide will look different on each device type:

Desktop

Desktop layout after.png

Tablet

tablet after.png

Mobile

Layout after.png

You can also hide some slide layers on certain devices. For example, the initial slide for desktops is shown below, but with a few steps we will make the videos disappear in mobile view.

Layer disappear before.png

  1. Pick your slider and start editing the slide you need to change. Pick a layer that needs to disappear and below you will see Position & Size tab. There, set Hide layer after this width (px) value to 481 to hide it on mobile (769 for mobile and tablet)

  2. Save the slide and view the result on a mobile device:

Layer disappear after.png

14 Replies to “Adjust Slider for Mobile Devices”

    1. Hi,
      I’ve just checked your Home Page and I could see the slider on the mobile device. Have you managed to sort this out?

  3. I’m using Moto Press Slider Lite on my e-commerce site. I adjusted all the slider settings according to your guide. Slider layout looks great on Desktop but it doesn’t work on mobile devices. When I load my site on Android phone the only thing visible is the background – text, button and other aren’t visible. Why?

    1. Hi Hunter,
      Could you specify what other parts of the slider are not visible on a mobile device? Can you see it well previewing the slider at the back-end and viewing it in mobile mode? Could you provide a website URL where we can take a closer look at the slider?

  4. Using motopress slider for a long time now. I have a strange issue.
    Slider works perfectly on Desktop and Tablet but on mobile devices the slides get a grey overlay (like when something is disabled).
    There are no settings for something like that and I haven’t changed anything in the code.
    How can I change that ?

    1. Hello Simon, could you please specify where the grey overlay appears: on the front or back-end?
      If slides get grey overlay on the front-end, could you provide us with the link to the page with the issue?
      In case grey overlay appears on the back-end, please, submit a ticket here https://motopress.com/support/ for us to have a closer look at the issue.

  5. I have motopress premium and trying to adjust some of the layers for mobile view but i don’t seem to have the drop down menu where i can view my slider in mobile or tablet view? it just seems to be in desktop for editing all the time. Can you advise please?

    1. Hi David,
      Thank you for your question. Please make sure you followed the guide on this page and did not miss step #2 – enabling sizes for devices you’d like to adjust layers for. Once you enable sizes and save changes you will have drop-down to select a device type.

  6. I am running into an issue where my MotoPress slider works perfectly on my computer and my iPad, but it is not showing up on my Android or my wife’s iPhone whatsoever. Seems rather strange to me. Any help on this would be much appreciated!

    1. Hi Michael,
      Thank you for reaching us. Do you mean slider just disappear on mobile devices? If it is so please try to navigate to Settings of this certain slider>Appearance> and check Visibility parameters. If there is any value added please try to remove it, save changes and check your site on mobile device again.

Comments are closed.