Home Forums Pro Themes Bizlight Pro Issues with bx-viewport size

Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #3496
    gaudialex19
    Participant

    Hi, I’ve just spend the whole day to find a way out… but I couldn’t :-S

    I’ve change a couple of things in the php code to have this design :

    http://agaudiano.com/Design/good_design.jpg

    On my screen everything is perfect, just the way I want. But if I shrink down the window or if I see it on a smaller screen, it looks like that :

    http://agaudiano.com/Design/bad_design.jpg

    As you can see, the Showreel button has disapear. Is there a way to block the bx-viewport to a min height, so it don’t overlap on the information ? I tried to change almost every div with the min-height but it doesn’t work.

    And I have one last question, is it possible to stop and hide the slider images on mobile devices ? Because I don’t find it very beautiful on my design and everytime a picture fade it block the “touch” on my iphone and can’t scroll down… which is very annoying.

    You can access to my site here : http://www.agaudiano.com

    I’m hoping you can help me out, best regards

    Alex

    #3531
    wensolutions
    Keymaster

    @gaudialex19, current font-size of the slider with the logo space is quite greater than slider viewport.
    Temporarily it can be fixed by reducing font size of slider content on browser viewport only as follows:

    h1.main-title {
        font-size: 2em !important;
    }
    
    .banner-first{
    font-size: 1.1em;
    }
    
    .banner-second{
    font-size: 1.2em;
    }
    
    .banner-btn{
    margin-top: 0px;
    }
    
    .evision-slider-caption .banner-con{
    margin-top:0px;
    margin-bottom:0px;
    }

    But you have to consider choosing an image for slider such that it has a bit more height than current one in order to accommodate the slider captions even when shrinking the browser.

    To hide slider images in mobile viewports, put the following lines of custom CSS in your theme option.

    Appearance -> Customize -> Themes Options -> Advanced Options -> Custom CSS

    /* Portrait and Landscape */
    @media only screen 
      and (min-device-width: 320px) 
      and (max-device-width: 568px)
      and (-webkit-min-device-pixel-ratio: 2) {
    
    .evision-main-slider li img{
    	display:none;
    }
    
    }

    Hope this helps!

    #3550
    gaudialex19
    Participant

    Thank you very much for your help. Everything seems to look way better this way 🙂

    But I’ve still a little issue with mobile devices. I could hide the slider image and replace the BG by another “static” image, but the slider seems to still do a transition, blocking for a second the scrolling… it’s a bit annoying. Is there a way to completely stop the slider transitions just for mobile devices ?

    Best Regards

    #3648
    wensolutions
    Keymaster

    In current context it is not possible to completely get ride of transition as long as static image is still being loaded as a background inside slider HTML markup. This means slider effect will still be transiting in the background.

    If you can go through some customization, alternative approach could be :

    <div class="evision-wrapper evision-wrap-banner evision-banner-right-nav">
    // current slider stuffs , hide this div through custom css in mobile viewports
    </div>
    
    /** add new div just below slider div above**/ 
    <div class="new-div with-static-background">
    // this div will be 'display: block' in mobile view hiding above slider div
    </div>

    Thanks

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