Okay
  Public Ticket #1343783
nectar slider text on responsive
Closed

Comments

  • latitudestudios started the conversation
    October 23, 2017 at 11:06am

    Hi there

    Please could you help me with the text on the nectar slider - I've tried loads of different things and can't successfully fix this. See attached screen shots of desktop size v mobile size

    Ideally, I;d like to change the size of the text container in mobile to make it wider, so the text is better aligned on the image.

    Being able to control the font size on different screen sizes would be really useful too

    I hope you can help - it;s quite urgent now - the site is in maintenance, so if you'd like to see, please let me know and I'll send a login.

    Thank you so much!

    Katherine

  •  9,016
    Tahir replied
    October 23, 2017 at 11:08am

    Hey Again,

    Have you tried adjusting the Mobile Text Overrides in here : http://prntscr.com/gyswl4 . 

    Be.st

    ThemeNectar Support Team 

  • latitudestudios replied
    October 30, 2017 at 10:26am

    Hi there

    Thank you for your suggestion - that helps a bit, but the text is still in a thin vertical list which crashes into  the top and bottom of the slider - I need to make the container wider so that this doesn't happen - i just can't find where to do that...I've attached examples of desktop and mobile versions - hopefully you can see what I mean!

    Please do you have any ideas?

    Thank you

    Katherine

  •  9,016
    Tahir replied
    October 30, 2017 at 11:00am

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    @media only screen and (max-width: 690px) {
    .nectar-slider-wrap[data-full-width="false"] .swiper-slide .content h2 {
        line-height: 16px !important;
    }
    .nectar-slider-wrap[data-full-width="false"] .swiper-slide .content {
        width: 80% !important;
    }
    .nectar-slider-wrap[data-overall_style="directional"] .swiper-container .slider-prev i, .nectar-slider-wrap[data-overall_style="directional"] .swiper-container .slider-prev:hover i {
        left: -27px!important;
    }
}

    Thanks

    ThemeNectar Support Team 

  • latitudestudios replied
    October 30, 2017 at 12:24pm

    Thank you! 

    That works really well.  :)