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.
- Under MotoPress Slider, find the slider you want to edit and click Settings.
- 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)
- 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.
- 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.
- 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.
- Do not forget to save the slide when you are done editing. As a result your slide will look different on each device type:
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.
- 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)
- Save the slide and view the result on a mobile device: