In Responsive Web Design, Tips and Tricks, WordPress Website

You have watched many videos and have finally figured out how to make a great revolution slider.  You think you have it set-up perfectly but yet, it doesn’t look so great on mobile devices. Here is how to fix that.

The odds are, you have not truly optimized it for mobile devices, you used the automated device settings.  And here is how to set up your revolution slider correctly.

STEP 1 – GO TO REVOLUTION SLIDER SETTINGS
In section 4, you will see Slide Layout. This is where you can adjust the size based on how much screen you would like the slider to cover on each of the devices. If you leave the custom grid size off, the content will be adjusted automatically, which often results in small text on mobile.  Adjust the size as you wish.

 

STEP 2 – GO TO YOUR FIRST SLIDE

Now that you have customized your slide layer grid sizes in Slider Settings, you will be able to preview how your slider looks on each one of the devices. You will see the device options right under the main styling section. Preview each one of the devices and make sure it looks great.

 

STEP 3 – MAKE ADJUSTEMTNS

Let’s say your text is not lining up correctly on the ipad or the size is too big. Stay on the device preview and adjust as necessary (change font size and text placement).  CHANGES PER EACH DEVICE WILL NOT AFFECT ANY OTHER DEVICE LAYOUTS OR MAIN SLIDER SETTINGS.  Make it perfect on each one of the devices. If you used a background photo that also does not look good, move to the next section to see how to fix it.

 

STEP 4 – ALIGNING THE BACKGROUND PHOTO ON DEVICES

If you used a background photo and it’s cut-off on a vertical device you can resolve it by adjusting its general alignment. In the Main Background you will go to the Source Settings (second text tab). Here is where you will align your background photo to best fit your image.  If the focus of your image is on the left side of the screen, you will align Left Center.  It all depends on the photo you are using. Make sure you pick the right on for your slider.

 

We hope this helps – have fun designing!

Recent Posts

Start typing and press Enter to search