How to make Slider Rev slide contents fill up the page in landscape view

Support
#1

Hello. I learnt to do a slide & it looks good front-end on my laptop, & phone in portrait. But when I tilt my phone to landscape, my slide looks weird - the contents stay squeezed in the middle of the page with lots of blank spaces on the left & right side of my phone.

What must I do to make the contents spread or enlarge evenly on a phone screen in landscape? I’ve read Slider Rev documentation & watched their videos. I turned on custom grid size & adjusted all my layers on all the 4 views - desktop, laptop, tablet & phone.

Oddly, my logo (which is supposed to be on the left top corner) is now near the middle top of the landscape phone view. Yet my burger menu (which is supposed to be on the right top) is indeed placed correctly on the right top of the landscape view. The logo & menu were created on the static page of my slider. It’s as if the static (global) page has been shoved to the right, but the other slides are stuck & confined to the portrait size.

#2

Hello There,

Thanks for writing in! Please be advised that the slider needs to initialize to be able to display the elements in the browser window. As you tilt the phone to a landscape view, it does not reinitialize which is why it does not look okay. To resolve this, please ensure that you have created a fully responsive revolution slider. Please review this video tutorial on how you can create an auto responsive slider:

For more details, you can also check out the documentation here:
https://www.themepunch.com/revslider-doc/slide-layers/#layercanvas
https://www.themepunch.com/revslider-doc/layer-responsive-behavior/

Hope this helps.

#3

Themepunch videos just add more confusion. What’s the implication of moving the screen size in that video?

I guess he’s trying tell us how us how things look when the screen size changes. But what should a beginner do to design a slide that is evenly placed in ALL devices?

Eg I have full screen settings. Turn on “custom grid size”. Place a layer of image or text. Set behavior to “responsive”. Then arrange it under each viewport.
Everything looks good on desktop, laptop, tablet (portrait) & phone (portrait).

But when you see the result at the front end on my phone / tablet LANDSCAPE. It’s out of whack.

Anyone has a way out of this enigma?

#4

Hello There,

You also consider the positioning of your rows, columns and the layer elements in your grid.
Please check out this documentation:
https://www.themepunch.com/revslider-doc/rows-and-columns/#position-styling
https://www.themepunch.com/revslider-doc/layer-groups/#position-styling

Hope this helps.

#5

No help at all. I’m not using rows nor columns. The layer group is good only for the one portview that’s selected - either the desktop, laptop, tablet (portrait) or phone (portrait).

So how to design for the phone LANDSCAPE & tablet LANDSCAPE?

#6

Hello There,

Thanks for updating in! The phone’s landscape view is as wide as the tablet’s portrait view. And the tablet’s landscape view is almost as wide as the desktop view. Regretfully the Rev Slider plugin does not have the option for you to design for the portrait and for the landscape view.

Hope this helps.

#7

My slides now look good front-end on laptop, tablet (landscape), phone (landscape) & phone (portrait) views. But it looks awkward on my iPad PORTRAIT: The contents are squashed towards the middle. Lots of blank space on top & a smaller band of blank space at the bottom.

I have chosen “FULL-SCREEN”. Under “behaviour”, I selected “auto responsive” and “responsive offset”. I set custom grid size for all the devices:

  1. mobile 480 x 720
  2. tablet 720 x 480
  3. notebook 1024 x 868
  4. desktop 1200 x 900

As mentioned by RueNel above, I don’t have the option to design for the tablet PORTRAIT. If I change the custom grid size for the tablet to PORTRAIT, then I can’t design for mobile LANDSCAPE.

I’m stuck. I’ve read the Slider Rev documentations & the videos on responsive slides. But they talk about the re-sizing of background images. I don’t have a background image. I just want my layers (the text, buttons and a small image) spread out on my iPad PORTRAIT view.

Can someone help, please?

#8

Hi @iamwithU

Unfortunately, there is no other way, I tried it. But when I’m working with the slider, I follow the size of 979px without a need for the custom grid and it works well on both desktop and tablet (landscape or portrait).

The compression occurs when you based it on big resolutions. Please note that tablet landscape is 1024px which is the same as laptop and desktop. Would you mind providing a sample URL where your slider is? Maybe I could recommend something based on your current slide.

Thanks!

#9

Thanks Rad. I hope you can stay with me on this. I believe that together we can uncover a solution.

Meanwhile can I clarify again if Slider Rev allows a slide to have a PORTRAIT version (“P”) & a LANDSCAPE version (“L”)?

In other words, we have a P version for the “mobile” custom grid size. When the mobile screen increases in width & reaches the landscape width, the slide changes to a L version. Then when the screen widens again, ie the device is now a tablet & reaches the tablet width (in portrait mode) the slide reverts to the P version. Then finally, when the screen widens & reaches the laptop mode, the slide becomes L.

I believe the answer is no right? If so it means, we can only design a P version for the mobile. And then a L version for the rest. In which case, how should I set my custom grid size?

That is, I suppose I turn on the custom grid size for the mobile - what should the px be?
Then what should I do for the tablet & laptop & desktop? Since all 3 share the L version, I only need to set custom grid size for one - which one & what px x px?

Lastly, can you elaborate about using 979 & 1024 - where do you input these px?

#10

Hi @iamwithU,

Yes, not possible as there is no portrait or landscape mode in Revolution slider, it only responds to devices width regardless of orientation. The custom grid will only allow you to display it differently for each screen size defined in the grid.

What if you can just set two sizes, the default and the mobile (767px). The default then could be 1024px and should be good for all larger device and tablets.

You can set 979px or 1024px when you enable the custom grid. It’s custom, it’s your preference :slight_smile:

I only explained that both landscape tablet, laptop, desktop are both in range to 1024px resolution. There are tablets that can be a laptop, and there are laptops that can be tablets. I couldn’t provide more recommendation as I’m not sure what the issue you’re getting with your slider.

Thanks!

#11

Hi @iamwithU,

I just checked and it seems to be responsive, the only issue I’m seeing is the image because it’s positioned at bottom left instead of center left. Could you try that?

And please provide a mockup design of what you’re expecting to achieve, I believe it’s already responsive :slight_smile:

Thanks!

#12

Thanks Rad, for reverting so promptly & staying with me on this. I’ve adjusted the images. I can’t do so for some slides because there are buttons on the right side in the landscape mode. For the last slide, the image is a portrait dimension, and so have to remain on the left side of the screen.

On my iPad Portrait, there is a big band of empty space at the bottom. Do you know why the slider can’t expand to fill up the screen? I would just like the contents to be evenly spaced out on all devices.

Also on the mobile Landscape, my logo & buttons became smaller (relative to the other layers & contents). The text and image widen in width proportionately, but not the buttons, logo and burger menu, and the margins (of logo & menu). The odd result is that the buttons, logo on the mobile Landscape look smaller than they are on the mobile Portrait :disappointed_relieved:

There are other issues, which can be addressed later. For now, if the above quirks can be ironed out, I can let my sliders go live & publish them. Truly appreciate your patience.

#13

Hi @iamwithU,

The slider responds to the width and not the height, and it will maintain the aspect ratio of the slider. Hence, it’s only normal to see a space below it. Let’s imagine the image in your slider, what will happen if the image’s width remains but it fills the height? It will stretch and not good. What you could do is create a custom grid with the width of 979px (just assuming you’re targeting standard tablet) and arrange your layer (image on top and full-width, and buttons below it). Hence, the buttons will fill the empty space while the image is bigger.

Unfortunately, there is no portrait and landscape mode editing in the slider. The tablet shares almost the same resolution as laptops and there are no browser features that will let the script detect the device it’s running to. I would use a different approach of layers arrangement for tablet size range regardless of the landscape, example, since I have an iPad Pro then the resolution would be between 1024px and 1366px (portrait and landscape). Then my custom grid sizes would be

1920px (desktop, 24 inch screen) (image on left and buttons on right)
1366px (laptop, iPad Pro’s landscape and other retina devices) (image on top and buttons to the bottom) – and since there is no landscape and portrait mode, we assume here that the layer positioning and arrangement will be the same regardless of orientation
1024px (iPad Pro’s portrait BUT, standard tablet’s landscape)
979px (standard tablet’s portrait, BUT, phone’s landscape)
767px (phone’s portrait)

As you can see, there are many sizes, so you’ll have to pick your preferred targets and in the slider, you can only have 4 sizes. I would choose these

1920 - Desktop Large
1366 - Notebook (and tablet as well)
1023 - tablet
767 - mobile

Skipping 979 since it’s in the range between 1366 and 979 as a tablet regardless of orientation. The key is, arranging your layers for those sizes so you could utilize those spaces. BUT, yes, since the tablet is in both range of laptops, the change in your tablet would also reflect on laptop view.

Thanks!

1 Like
#14

That’s awesome advice, Rad. I’ll apply your suggestions right away. I’m currently using “full-screen” slider. As the custom grid sizes require us to set _px x _px, may I know what should the heights be? So:

Desktop - 1920 x ?
Notebook - 1366 x?
Tablet - 1023 x ?
Mobile - 767 x ? (or is it 420 x 767 px? )

Also, which one do you recommend I put the buttons below the image - is it the tablet 1023 x _? This is a great idea. So you’re suggesting that this design be the same as the one in my mobile Portrait, right?

I think I’m getting there. So grateful, Rad.

#15

Hi @iamwithU,

You can try these sizes.

Desktop - 1920 x 1080
Notebook - 1366 x 1024
Tablet - 1024 x 768 (let’s change this to 1024 to cover phone’s landscape)
Mobile - 768 x 1024 (since it’s phone’s portrait, height is greater than width)

Yes, should be the same in portrait since the width is overlapping from each device’s orientation.

The content will be displayed the same on 420px as for 768px.

Thanks!

#16

Hi Rad, i amended as you wisely suggest. Things improved tremendously. I love your idea of placing buttons below image. Thanks :kissing_heart:

I’m still grasping how the slider behaves. There are quirks throughout, most of which in the tablet Portrait. Can you kindly let me know what I should do to make things look decent? I’m prepared to alter the image or whole design.

There are other kinks when I see front end on my mobile or iPad. Beside the long delay to see the changes, the text becomes unevenly sized & the white color of my font not showing in the title. The burger menu is weirdly enlarged. An example is in the 2nd slide. Do you see them at your end?

#17

Hi @iamwithU

I’ve checked your website and this is how I can see it on iPad:

Since you are saying that there is a “delay to see the changes”, then I believe this issue is due to cache, if you have a caching plugin installed, then please purge cache from the plugin and recheck this issue also, try to clear cache from your browser as well.

If this didn’t help, then please provide us with WordPress Dashboard login details in a “Secure Note” so we can investigate this issue.

Thanks.

#18

I have a super cache plugin, which I’ve just removed, & cleared History of my Safari on my laptop and iPhone. But the problem remains.

In your video, the quirks are:
a) There are supposed to have 3 buttons in each slide. They vanished!
b) In the 2nd slide, the word “Granola” is supposed to be in white color. The other text shrunk!
c) 3rd slide - uneven font size in title. Likewise for last slide wording.
d) I did not make the slides scroll on their own. They are supposed to change only on clicking a button. Where is this feature edited?

If you see the mobile version (as in my screenshot of previous post), the burger menu is enlarged & squashed to the right edge, although I had specified an offset of 10px from the “right alignment”, and “slide based”. It seems as if there is something that overrides it.

I had designed the slides using Slider Rev’s free template “Photography” as a start. So the font is based on that. But it seems there is a conflict somewhere.

To get round the issue of the weird responsiveness, I’m going to re-design my slides by using images as the background instead. Any advice as to what dimensions my image would be ideal - so that it looks good whether in Portrait or Landscape mode?

#19

Hi @iamwithU

a) These three buttons are there, because of responsiveness, according to the screen size, sometimes they are beside the image and sometimes they are just underneath it, please check this screencast:

[Album] Imgur

b) Neither on Desktop nor on tablets, this word “Granola” is in white, are you sure you set it in white int he slider?

c) It’s the same as on Desktop, I can see the word Tender was given font-size: 35px;, are you sure you didn’t do that in the slide settings?

d) They weren’t when I captured the screencast and they aren’t now, I was scrolling with the mouse wheel, however, this option can be controlled from there:
https://www.themepunch.com/faq/turn-autoplay-off-sliders/

On the mobile version, you are right, you can add this CSS code to the slider’s custom CSS section:

.rev-burger span {
    width: auto;
}

Check this guide to know where to add custom CSS codes per slide:

https://www.themepunch.com/faq/custom-css-or-javascript-for-version-5-0/

Unfortunately, there is no magic image size that would look great on landscape and portrait orientation, however, when it comes to Revolution Slider, I highly recommend following this guide to design a responsive slider:

If you want us to investigate issues (b and c) for you, then please provide us with WordPress Dashboard login details in a “Secure Note”.

Thanks.

#20

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.