[RadModerator]

Seems like you sorted it out Chris 🙂 , Good job. Just let us know if you have any other queries.

[Philip StancilParticipant]

Nice fix, Chris! I needed to keep my Slider Layout set to Full Screen, so a solution that worked for me was to go in to the text layer in Slider Revolution that you want to be responsive. I then went to the ‘Layer General Parameters’ section and then in there I found the ‘Align, Position, & Styling’ section. In there, I set ‘White Space’ to ‘Pre-Wrap’, and that made the text responsive for me!

[FriechModerator]

Hi Chris,

Can you point us to the title that is not wrapping on the mobile? Philip is right if you do know the right selector you can add a custom css with white-space: Pre-Wrap; or white-space: normal; rule to address the issue.

Cheers!

[MishoParticipant]

Hi,

I have the same problem, but whichever method I use, the text adopts until one point of resizing the browser, and then it expands back. It cannot fit in the mobile browser window.

I have tried, manually positioning the text.

Can you take a look?

Thanks!

[MishoParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi @misho,

Try adding following CSS under Customizer > Custom > CSS:

@media (max-width: 640px){
    #slide-1-layer-10 {
        word-break: break-word !important;
        width: 100% !important;
        min-width: 100vw !important;
        text-align: center;
    }
}

Hope it helps.

[MishoParticipant]

Great, it worked!

However, I have changed the slider, and now this text should be #slide-3-layer-2, but the CSS does nothing now. Strange.

I am considering hiding the slider on mobile, and open a mobile-only section to replace it, below the nav.

Thanx!

[JadeModerator]

Hi @misho,

There is actually an easy way to change the display of the slider when view in different device screens. See screenshot for reference. You can simply switch the view and then preposition the layers accordingly. I have done it for the slide but kindly remove the CSS you have added for it previously.

Hope this helps.

[MishoParticipant]

Ah, silly me. 🙂

I usually don’t use sliders so I never got a chance to learn Revolution.
It can be quiet fast if optimized. That’s great!

One more question:

I don’t like the idea that navbar sits on the bottom of the screen on mobile. When pressed, visually nothing happens. Navbar opens bellow the viewport.

I need one of two possible solutions:

1. When Hamburger is pressed, navbar scrolls down so the top of the navbar is aligned to the top of the screen.
(Maybe giving to the Hamburger an anchor link which would make it scroll down and align).

or

2. Slider is above masthead on desktop and below masthead on mobile.

Thank you so much for your outstanding support!

[MishoParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi Misho,

Thanks for writing in! This is because your slider above masthead is set to full screen with offset value of navbar height. You could try this JS code under Custom > JavaScript in the Customizer to automatically scroll the window above the header when user press the navbar button:

jQuery(document).ready(function($) {
  var $navbar   = $('.x-nav-wrap.mobile');
  var $masthead = $('.masthead');

  function animateOffset( element, ms, easing ) {
    $('html, body').animate({
      scrollTop: $(element).offset().top + 1
    }, ms);
  }

  $('.x-btn-navbar').on('click touchstart', function() {
    if ( !$navbar.hasClass('in') ) {
      setTimeout(function() {
        animateOffset($('.masthead'), 300);
      }, 800);
    }
  });
});

Thanks!

[MishoParticipant]

Works perfectly!

This may be an option inside the page options for setting the rev slider above or below the masthead. A checkbox to enable it in case of fulscreen slider with offset value.

Usability and UX is much better this way, in my opinion.

Thank you!

[ZeshanMember]

You’re most welcome Misho!

I’ll also consider it as a featured request and will forward to our development team. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive.

Cheers!

[fatcatgraphicsParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi @fatcatgrapics,

Thanks for writing in!

Please update your Revolution Slider plugin to the latest version, i.e. 5.0.9 and see if it helps resolving the issue. You can review our update guide.

Thank you!

[Author]

Posts