Okay
  Public Ticket #3160679
Salient Nectar Slider headline cut off in mobile view
Closed

Comments

  • Jason Hatcher started the conversation
    November 5, 2022 at 2:00am

    Hi. I have inherited this website from my new client. The headline on the first slide is being cut off in the mobile view. I've looked through the settings and cannot find a way to center the headline on mobile. Can you assist?

  •  1,919
    Judith replied
    November 5, 2022 at 5:52am

    Hello Jason,

    Thanks for choosing Salient.

    Please try this css:

    @media only screen and (max-width: 690px){
    .nectar-slider-wrap[data-full-width=true][data-fullscreen=false] .swiper-slide .content h2, .full-width-content .vc_col-sm-12 .nectar-slider-wrap[data-fullscreen=false] .swiper-slide .content h2, .nectar-slider-wrap[data-full-width=boxed-full-width][data-fullscreen=false] .swiper-slide .content h2, .full-width-content .vc_span12 .nectar-slider-wrap[data-fullscreen=false] .swiper-slide .content h2 {
        width: 238px;
        margin-left: -8em;
    }
}

    Thanks.

  • Jason Hatcher replied
    November 8, 2022 at 12:30am

    That's fine for mobile, but the type is far too small. And if I increase its size, this CSS no longer seems to work. Also, captions appear weird and off to the right on mobile.

    Also, there is a breakpoint above that (tablet?) where it's still all off-centre. 

    Why does this slider feel like a hack job?

  •  8,939
    Tahir replied
    November 8, 2022 at 5:42am

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    @media only screen and (max-width: 999px) {
    .nectar-slider-wrap .swiper-slide[data-y-pos=middle] .content {
        top: 50%!important;
        -webkit-transform: translateY(-50%)translateZ(0) !important;
        transform: translateY(-50%)translateZ(0) !important;
        left: 0 !important;
    }
}

    Thanks

    ThemeNectar Support Team 

  •  8,939
    Tahir replied
    November 8, 2022 at 5:45am

    Also be sure to remove the other css provided earlier.

    Thanks 


    ThemeNectar Support Team