Menu bar floating in middle of SR slider when mobile is turned into landscape orientation

[nleaivy]

Hi,

I’m experiencing an issue on my phone that looks like a conflict between my menu bar (which is supposed to stay at the bottom of the slideshow) and my SliderRevolution slideshow when the phone is turned into landscape orientation. The menu bar floats in the middle of the slider rather than sitting at the bottom (see screenshot in SN):

Can you please advise?

Thanks,

Natasha

[ruenel]

Hello Natasha,

This is because of your Height settings in the Bar element.

You may need to set it to 100vh on smaller screens.

Best Regards.

[nleaivy]

Unfortunately, that’s not the only problem.

It seems that the menu bar is where it’s supposed to be but the problem is the slideshow. The slideshow is extending beyond the top of the section which is supposed to be below it, covering up a large portion of that text.

Is this something that I need to contact Slider Revolution about?

[ruenel]

Hey Natasha,

We may need to tweak your Bar element settings.

1.) First, we need to edit your slider and set the following settings:

If you take notice, we add #someID to decrease the height of your slider.

2.) In your custom header, the Bar element needs to have the auto height.

3.) And lastly, an ID must be added to the Bar element.

Best Regards.

[nleaivy]

Re #1: where would I find these settings?

Re #2: the problem with setting the bar’s height to ‘auto’ results in a bar that is too thick height-wise. How can I otherwise customize the bar’s height?

Thank-you,

Natasha

[ruenel]

Hello Natasha,

#1.] You will have to edit the Slider in Slider Revolution. Find the settings in the Layout tab of the Slider settings.

#2.] The Bar’s height will depend on the height of the element inside it.

Cheers.

[nleaivy]

Unfortunately, this created two different issues:

#1 it has significantly decreased the size of the text area and its box while also squishing the images (SR uses tablet version for mobile landscape version instead of allowing for the two different aspect ratios).

#2 It’s going a bit against suggestions I’m receiving from SR support to use version of the tablet’s bg image for mobile landscape orientation because SR uses the tablet orientation for mobile landscape orientaton. As a result, the slide’s image layer serving as the bg is now a squished image for the slide I’m trying to make responsive (so I can develop a template in order to make all following slides responsive).

I’m also trying to work with Slider Revolution to fix this issue and nothing they suggest is working either (I bought Slider Revolution to help solve these issues I’m having between Slider Revolution and Pro). However, I forwarded your advice to SR support so maybe they can help with the sizing issues happening now.

With the bar height, the only things I have in that bar are navigation text links. Is there still no way to customize the height of the bar if I want the bar to sit where it should be (below the slideshow)?

Thank you so much for your help this far,

[nleaivy]

Is there a way to design a section to display for specifically the mobile-landscape orientation? This specific aspect ratio is vastly different from mobile-portrait and tablet but yet I think the tablet version is displayed on mobile-landscape orientation. Is that right?

If not, is it possible to design a section for tablet but when it is displayed on mobile-landscape-orientation, it is scrollable (with the menu bar sitting below the slideshow) so the slideshow and its readability are not compromised? Does that make sense?

[nleaivy]

Slider Revolution got in contact for the idea of a (vertically scrollable) tablet sized slideshow/header that will appear only on the mobile-landscape orientation but notes:

This was our initial solution. To use the full-width layout instead of the full-screen layout so the users can scroll down on mobile-landscape to see the full slideshow. Because if you set the slider layout to Full-screen, Slider Rev will force the slider to fit the whole screen no matter what the screen size is. However as per your theme’s suggestion, you’ll have to make the slider layout to full-screen so the menu below it won’t get broken. I suggest getting in touch with your theme author again and check if there’s a way for the menu to work if the slider’s layout is set to full-width and not full-screen on mobile landscape view.

Is this possible within the theme’s capabilities? All I want is a slideshow/header for the mobile-landscape orientation that doesn’t compromise the image or the text’s readability. Using a tablet aspect ratio for mobile-landscape does compromise both the image (the point of a slideshow) and the readability of text.

[ruenel]

Hello Natasha,

This is how it looks at the moment on my phone.

The Slider is part of the page content that is visible only on mobile and the header is sticky. Please also send us a video screencast so we can have a clear idea of how it looks on your phone as well.

Thanks.