Okay
  Public Ticket #302265
Website on mobile
Closed

Comments

  • Daniel started the conversation
    October 17, 2014 at 4:37pm

    Hi

    I installed Salient on the URL provided. The site looks great on the desktop but on mobile the following things don't render correctly:

    1) Logo - its very small compared to the rest of the site

    2) The top slider - badly rendered and very small

    3) The bottom slider - badly rendered and very small

    Thanks

  •  8,839
    Tahir replied
    October 17, 2014 at 5:59pm

    Hey!

    1: Add this into the Custom CSS box located in your Salient Options panel :

    @media only screen and (max-width: 1000px) and (min-width: 1px) {
    html body header#top #logo img {
        height: 45px!important;
        margin-top: -12px!important;
    }
}

    2 ,3 :  Please try using the Flexible Slider Height option in Nectar Slider.

    Also when using the flexible slider height option you have to enter the slider height based on how big your images would be at 1600px width - this will ensure the scaling is perfect with no clipping. To find the correct height for your images use this: http://andrew.hedges.name/experiments/aspect_ratio/ . The default width for images is 1600px so for example a image that is 1904 x 738px would be converted to 1600 x 620px if scaled down. Therefore slider height would be set to 620 px .


    The flexible slider height option makes the Nectar Slider respond perfectly to ensure there's no clipping on any view - leaving it off will cause the height of the slider to change only once per every viewport change (desktop, ipad, mobile) and clip variously between them.
    Thanks

    ThemeNectar Support Team 

  • Daniel replied
    October 19, 2014 at 4:36am

    Hi

    The CSS for the logo has fixed the logo issue. So that's great. Thanks for that.

    The notes about the slider didn't work. The images in the slider respond ok (would actually prefer clipping so the images stay big) but the text and buttons in the slider become really small in the mobile. I need them to stay a fixed size so they remain consistent with the rest of the site.

    Thanks

  • Daniel replied
    October 20, 2014 at 12:25pm

    Can you tell me the settings of the 2 sliders called "This is Salient" and "Ready to Stand Out" on your demo page with layout style set to Boxed? http://themeforest.net/item/salient-responsive-mul...

    Looks like I basically just need to replicate these settings to fix my mobile problem with the slider text being unreadable.

  •  8,839
    Tahir replied
    October 20, 2014 at 4:37pm

    Hey!

    Add this into the Custom CSS box located in your Salient Options panel :

    @media only screen and (max-width : 690px) {
    body #boxed .nectar-slider-wrap div.swiper-slide .content h2 {
        font-size: 17px!important;
        line-height: 26px!important;
        margin-bottom: 10px;
    }
    
    body #boxed .nectar-slider-wrap div.swiper-slide .content p {
        font-size: 12px!important;
        line-height: 20px!important;
        padding-bottom: 5px!important;
    }
    
    #boxed .nectar-slider-wrap div.swiper-slide .button a {
        font-size: 11px!important;
    }
}

    Thanks

    ThemeNectar Support Team 

  • Daniel replied
    October 20, 2014 at 5:10pm

    Cool thanks for that. I'm still not getting the same results as http://themeforest.net/item/salient-responsive-mul...

    What are the rest of the associated settings for those 2 sliders?

  •  8,839
    Tahir replied
    October 21, 2014 at 2:00pm

    Hey!

    If you want it exactly like the demo use this css instead: 

    @media only screen and (min-width: 1000px) and (max-width:1300px) {
    .nectar-slider-wrap[data-full-width="true"] .swiper-slide .content h2,.nectar-slider-wrap[data-full-width="boxed-full-width"] .swiper-slide .content h2,.full-width-content .vc_span12 .swiper-slide .content h2 {
        font-size:82.5px!important;
        line-height: 93.5px!important;
    }


    .nectar-slider-wrap[data-full-width="true"] .swiper-slide .content p,.nectar-slider-wrap[data-full-width="boxed-full-width"] .swiper-slide .content p,.full-width-content .vc_span12 .swiper-slide .content p {
        font-size: 18px!important;
        line-height: 31.2px!important;
    }
}


@media only screen and (min-width : 690px) and (max-width :1000px) {
    .nectar-slider-wrap[data-full-width="true"] .swiper-slide .content h2,.nectar-slider-wrap[data-full-width="boxed-full-width"] .swiper-slide .content h2,.full-width-content .vc_span12 .swiper-slide .content h2 {
        font-size:60.5px!important;
        line-height: 71.5px!important;
    }


    .nectar-slider-wrap[data-full-width="true"] .swiper-slide .content p,.nectar-slider-wrap[data-full-width="boxed-full-width"] .swiper-slide .content p,.full-width-content .vc_span12 .swiper-slide .content p {
        font-size: 13.2px!important;
        line-height: 24px!important;
    }
}


@media only screen and (max-width : 690px) {
    .nectar-slider-wrap[data-full-width="true"][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 {
        font-size:27.5px!important;
        line-height: 38.5px!important;
    }


    .nectar-slider-wrap[data-full-width="true"][data-fullscreen="false"] .swiper-slide .content p,.nectar-slider-wrap[data-full-width="boxed-full-width"][data-fullscreen="false"] .swiper-slide .content p,.full-width-content .vc_span12 .nectar-slider-wrap[data-fullscreen="false"] .swiper-slide .content p {
        font-size: 7.68px!important;
        line-height: 17.52px!important;
    }
}

    Thanks

    ThemeNectar Support Team 

  • Daniel replied
    October 22, 2014 at 6:21am

    That didn't work = (

    The root issue is the slider height is too small on a mobile device. The CSS you've provided allows me to adjust only the text (unless I'm missing something).

    Here's the code I've used for my 2 sliders. Attached are how they look on a small mobile screen e.g. iPhone 4S.

    Top Slider - [nectar_slider full_width="true" parallax="true" location="Our awesome slider" slider_transition="slide" flexible_slider_height="true" slider_height="635" autorotate=""]

    Bottom Slider - [nectar_slider full_width="true" flexible_slider_height="true" location="Our expertise" slider_transition="slide" autorotate="" slider_height="400"]

    NB: I have to specify the slider_height value otherwise they sliders are too big on the desktop.

  •  8,839
    Tahir replied
    October 22, 2014 at 4:43pm

    Hey Again!

    If the slider heights gets too low please set a minimum height as well.  The css provided is indeed for the text. Try changing its values if you feel the need so. 

    Thanks

    ThemeNectar Support Team 

  • Daniel replied
    October 22, 2014 at 9:29pm

    That works.

    Thanks!