Navigation
This is archived content. Visit our new forum.
  • Author
    Posts
  • #55049

    Rad
    Moderator

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

    #259964

    Philip Stancil
    Participant

    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!

    #260096

    Friech
    Moderator

    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!

    #629147

    Misho
    Participant

    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!

    #629148

    Misho
    Participant
    This reply has been marked as private.
    #629156

    Thai
    Moderator

    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.

    #631200

    Misho
    Participant

    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!

    #631257

    Jade
    Moderator

    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.

    Attachments:
    You must be logged in to view attached files.
    #632579

    Misho
    Participant

    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!

    #632584

    Misho
    Participant
    This reply has been marked as private.
    #632689

    Zeshan
    Member

    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!

    #634187

    Misho
    Participant

    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!

    #634201

    Zeshan
    Member

    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!

    #641813

    fatcatgraphics
    Participant
    This reply has been marked as private.
    #642018

    Zeshan
    Member

    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!