Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • December 8, 2016 at 12:15 pm #721901
    MadRhino

    This is a follow up to my request below.
    https://kriesi.at/support/topic/advanced-layerslider-on-mobile-devices/

    Hi Basilis

    Sorry, I have to bother again.

    The code you provided in your answer to my request above is working perfectly, but when I moved it to the style file of my child theme (I prefer to organize my CSS changes there), it stopped working. Is there any particular reason or remedy for this?

    I would appreciate your insight and help with this.

    Many thanks

    December 12, 2016 at 2:47 pm #723132
    Yigit

    Hey MadRhino,

    Can you please post the content of your style.css file from child theme here using – http://pastebin.com/? There might be an error in your custom CSS that is stopping your code from working.

    Best regards,
    Yigit

    January 2, 2017 at 11:10 am #728456
    MadRhino

    Hi there, Yigit and Nikko,

    I have no created another page on my blog, which will feature another text-based Advanced Layerslider. The page id for this page is 705.

    How would I need to incorporate this additional page (iD) into your code below, so it will apply to this second page as well?

    I will also check on the potential CSS sheet issue and post it via pastebin, but there’s hardly anything in it.

    Many thanks for your time and help with this.

    Happy New Year!

    @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;
    }
    }

    January 2, 2017 at 12:29 pm #728476
    Nikko

    Hi,

    Happy New Year and Thanks for contacting us :)

    To include another page to the style, you just need to copy the selector put a comma at the end of the old selector, press enter and paste the copied selector and change the 174 with 705, so the current selector looks like this:

    #top.page-id-174 #wrap_all .ls-wp-fullwidth-container .ls-slide {

    it would be changed to this:

    #top.page-id-174 #wrap_all .ls-wp-fullwidth-container .ls-slide,
#top.page-id-705 #wrap_all .ls-wp-fullwidth-container .ls-slide {

    Let us know if this helps :)

    Best regards,
    Nikko

    January 2, 2017 at 2:58 pm #728616
    MadRhino

    Thanks Nikko, but, unfortunately, this didn’t do it.

    Now, the smaller tag line in the slider is out of place and moved next to the main header.

    My previous request includes private login information to my blog. Would you mind taking a look?

    I’m talking about the Advanced Layerslider on the Moments page.

    Many thanks.

    January 2, 2017 at 6:20 pm #728712
    Nikko

    Hi,

    Sure. The ipad versions seems good, I have modified your css only for mobile version. I have added css classes to the paragraph/text in the layerslider and have added this code inside @media max-width:767px in Quick CSS:

    #top.page-id-705 .avia-layerslider .ls-slide p {
height: auto !important;
line-height: 1.2 !important;
padding: 0 20px !important;
position: static;
width: 100% !important;
text-align: center;
-webkit-box-sizing: border-box !important;
box-sizing: border-box !important;
}

#top.page-id-705 .avia-layerslider .ls-slide p.ls-main-heading {
font-size: 28px !important;
padding: 30px 20px 0 !important;
}

#top.page-id-705 .avia-layerslider .ls-slide p.ls-subheading {
font-size: 18px !important;
padding: 10px 20px 0 !important;
}

#top.page-id-705 #wrap_all .ls-wp-fullwidth-container .ls-slide {
display: flex !important;
flex-direction: column;
align-items: center;
}

#top.page-id-705 .ls-wp-fullwidth-container {
    height: 74px !important;
}

    Let us know if it’s good :)

    Best regards,
    Nikko

    January 12, 2017 at 11:33 am #732576
    MadRhino

    Hi Nikko, unfortunately the code you provided above doesn’t seem to work. It even messes up the full screen (desktop) version of my LayerSlider. I took a screenshot before switching back to the old code I mentioned earlier in this post.

    Nevertheless, the text on the LayerSlider looks small and somewhat wimpy on mobile device (iPad, Smartphone). Not sure what else to say. What I’m hoping to achieve is something similar to http://www.lippincott.com.

    Any ideas?

    Many thanks.

    January 17, 2017 at 1:13 pm #734682
    Andy

    Hi,

    you need to wrap the code Nikko provided to you inside media queries, to make sure it’s working properly on smaller screen sizes. So for iPad something like this:

    @media only screen 
  and (min-width: 768px) 
  and (max-width: 1024px) {
#top.page-id-705 .avia-layerslider .ls-slide p {
height: auto !important;
line-height: 1.2 !important;
padding: 0 20px !important;
position: static;
width: 100% !important;
text-align: center;
-webkit-box-sizing: border-box !important;
box-sizing: border-box !important;
}

#top.page-id-705 .avia-layerslider .ls-slide p.ls-main-heading {
font-size: 28px !important;
padding: 30px 20px 0 !important;
}

#top.page-id-705 .avia-layerslider .ls-slide p.ls-subheading {
font-size: 18px !important;
padding: 10px 20px 0 !important;
}

#top.page-id-705 #wrap_all .ls-wp-fullwidth-container .ls-slide {
display: flex !important;
flex-direction: column;
align-items: center;
}

#top.page-id-705 .ls-wp-fullwidth-container {
    height: 74px !important;
}}

    For more information about media queries refer to: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Best regards,
    Andy

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.