Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • November 17, 2016 at 12:24 pm #713538
    MadRhino

    Hi there,

    I’m working on my blog, for which I would like to use the Avia Advanced Layerslider. The slider contains just a tag line with oversized text. It looks exactly how I want it to look.

    The problem lies when you look at that page on a mobile device, e.g. on an iPad.

    The container of the slider adapts to the smaller screen size, but the text itself is not reduced in size. I’m sure there must be a solution to this, as the text is now squeezed into multiple lines, so of which contain just a single word. It doesn’t look good.

    Would you mind taking a look into this for me, please. I plan to implement the same idea on other pages as well, so, finding a solution to this is important to me.

    BTW. I used the following settings:

    Slider Dimensions:

    Slider Width: 100%
    Slider Height: 800px

    Responsive Mode:

    Enabled
    Max Width: 1920px

    You can see my blog at the link provided below

    Many thanks for your help. You guys rock

    November 18, 2016 at 11:41 pm #714215
    MadRhino

    Unfortunately, I haven’t heard back from you guys.

    I think making the text layers adapt to different screen sizes shouldn’t be that difficult after all.

    How about creating different CSS rules or classes depending on the following 3 screen sizes (below)

    Would that do the trick?

    Unfortunately, I wouldn’t know how to code that into the layerslider I was talking about.

    Thoughts, guys?

    As always, many thanks for your help.

    @media (min-width: 1201px)
    .introHeading {

    font-size: 100px;
    line-height: 1em;

    }
    @media (min-width: 1024px)
    .introHeading {
    width: 70%;
    }

    @media (min-width: 768px)
    .introHeading {
    padding-top: 145px;
    padding-bottom: 130px;
    font-size: 85px;
    line-height: 1.05em;

    November 21, 2016 at 11:19 am #714750
    Nikko

    Hi,

    Sorry for the delayed response, since there are lots of queries lately, I checked you site in mobile and the text seems cut off, can you try adding this code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:767px) {
  #top .avia-layerslider .ls-slide p {
    padding: 0 20px !important;
    position: static;
  }
}

    Let us know you’re feedback after adding this code, if you have other pages that uses layer slider, since the code I gave will other layersliders, I think putting it it a section and adding an id will be a better solution for the customization to be specific. Hope this helps.

    Regards,
    Nikko

    November 22, 2016 at 1:12 am #715065
    MadRhino

    No problem, Nikko. Thought that you guys were busy.

    Anyways, I tried your code and it didn’t have any impact neither on how the text is displayed on smaller mobile devices, nor did it resolve the issue with the first word being cut off. Thoughts?

    Many thanks.

    November 22, 2016 at 4:50 am #715090
    Nikko

    Hi,

    I couldn’t see the code I gave reflected on the frontend. Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    Login credentials include:

    • The URL to the login screen.
    • A valid username (with full administration capabilities).
    • As well as a password for that username.
    • permission to deactivate plugins if necessary.

    Best regards,
    Nikko

    November 22, 2016 at 11:46 am #715218
    MadRhino

    Hi Nikko,

    I’m sorry, but I removed the code again after I realized that it didn’t resolve the problem. I made that a habit to avoid that I’ll end up with bits and pieces of code I no longer recall what they’re good for.

    Either way, I added it back on. I also created an admin account for you.

    Please find the login path below:

    Many thanks for your help, Nikko

    November 22, 2016 at 8:24 pm #715549
    Nikko

    Hey!

    The login doesn’t work, please check. I checked on your site and the code I gave is reflecting and when checking in an emulator it shouldn’t be cut off, can you post a screenshot on how it looks on your mobile? you can upload it on imgur.com or dropbox and post the link here.

    Regards,
    Nikko

    November 23, 2016 at 1:20 pm #715890
    MadRhino

    Sorry about that Nikko,

    Here we go again. The login info works now. I’ve tried it.

    Like I said, the content of the layerslider is still cut off, when I’m looking at the site on my iPad. Please see screenshot below. I’ve erased the cache and browsing history and it didn’t make a difference.

    Many thanks for your help and Happy Thanksgiving!

    November 25, 2016 at 9:29 am #716733
    Nikko

    Hey!

    I have replaced the code I gave you to this one:

    @media only screen and (max-width:1024px) {
  #top.page-id-174 #wrap_all .ls-wp-fullwidth-container .ls-slide {
    display: flex !important;
    align-items: center;
  }

  #top.page-id-174 .avia-layerslider .ls-slide p {
    font-size: 62px !important;
    height: auto !important;
    line-height: 1.2 !important;
    padding: 50px 120px !important;
    position: static;
    width: 100% !important;
  }
}

@media only screen and (max-width:767px) {
  #top.page-id-174 .avia-layerslider .ls-slide p {
    font-size: 28px !important;
    padding: 0 20px !important;
  }
}

    Let us know if it’s good on your end too :)

    Cheers!
    Nikko

    November 27, 2016 at 7:41 pm #717467
    MadRhino

    Many thanks, Nikko, this did the trick. The text layers now scale beautifully on mobile devices.

    :-)

    November 27, 2016 at 9:29 pm #717494
    Basilis

    Hey!

    Happy you could solve it
    Please remember to rate our theme at themeforest, it does help us a lot!

    Thanks a lot for your patience and understanding

    Regards,
    Basilis

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Advanced Layerslider on Mobile Devices’ is closed to new replies.