Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #396278

    I recently activated the transparent & glassy header on my site and noticed it caused an issue on my homepage on my iPhone. Once the transparent header is activated, the fullscreen slider is larger and extends past being fullscreen on my iPhone. If it is deactivated, the slider goes back to being fullscreen. My question is, can you provide me with some quick css to keep the fullscreen slider on my homepage fullscreen on my iPhone when the transparent & glassy header is activated? Thank you!

    #396892

    Hey djshortkut!

    Thank you for using Enfold.

    Try to add to the Quick CSS field:

    @media only screen and (max-width: 480px) {
    .home .avia-builder-el-0.avia-fullscreen-slider .avia-slideshow {
    height: 522px !important;
    }}

    Regards,
    Ismael

    #397086
    This reply has been marked as private.
    #397643

    Hi!

    it’s showing fine for me, like in your screenshot:

    Does it work for you as well? If not clear your browser cache please.

    Cheers!
    Andy

    #397758
    This reply has been marked as private.
    #397999

    Hey!

    The fullscreen slider doesn’t extend past the initial browser screen height when I rechecked the page. I think it is fixed.

    Cheers!
    Ismael

    #398677

    The first link above is the current homepage. The second link is how the homepage used to look before I activated the transparent & glassy header. As you can see on my new homepage the fullscreen slider extends past the browser screen height on the iPhone and doesn’t format to the screen height like it does when the standard header is active. It also does the same thing on your main demo I noticed. Any way this can be fixed?

    #398822

    Hi!

    Alright. Looks like it’s happening on iPhone5, at least on an emulation. Try this:

    @media only screen and (max-width: 420px) {
    .home div#fullscreen_slider_0 {
    max-height: 425px !important;
    overflow: hidden;
    }}

    Remove the other css code.

    Cheers!
    Ismael

    #399098
    This reply has been marked as private.
    #399436

    Hi!

    Please replace it with:

    @media only screen and (max-width: 420px) {
    .home div#fullscreen_slider_0 {
    max-height: 425px !important;
    overflow: hidden;
    }
    
    .home .avia-builder-el-0.avia-fullscreen-slider .avia-slideshow {
    height: 425px !important;
    }}

    Regards,
    Ismael

    #399439

    Thanks Ismael, that worked perfectly!

    How can I do the same thing on the iPhone in landscape mode?

    #400516

    Hey!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 568px) {
    .home div#fullscreen_slider_0 {
    max-height: 575px !important;
    overflow: hidden;
    }
    
    .home .avia-builder-el-0.avia-fullscreen-slider .avia-slideshow {
    height: 575px !important;
    }}

    Best regards,
    Yigit

    #401175

    Thanks Yigit! That worked with some modification.

    I have a question though. Why doesn’t the fullscreen slider work the same way on the iPhone with a transparent header as it does when there is a regular header on a page. Meaning, on the iPad and larger screen sizes the fullscreen slider still goes fullscreen but on the iPhone it doesn’t fit to the confines of the browser like on the larger screen sizes. This only happens when the transparent header is activated. This can’t be how the fullscreen slider is supposed to function with a transparent header, is it? The only problem that I see happening is that on smartphones with different screen sizes the fullscreen slider won’t fit to the browser especially with the code I input. It works on my iPhone 6 now but I’m thinking that if a user pulls it up on another size screen it won’t format correctly. Make sense?

    #401318

    Hi!

    The only explanation is that the slider height calculation script (avia_browser_height) isn’t working correctly due to the header position on mobile device. We already reported the issue to Kriesi. You can edit shortcodes.js, find this code:

    css += ".avia-builder-el-0.av-minimum-height-100 .container, .avia-builder-el-0.avia-fullscreen-slider .avia-slideshow{height:"+wh100_mod+"px;}\n";
    

    Cheers!
    Ismael

    #404282

    Not really sure how I would edit this code to make it calculate correctly. The quick css you provided me should work for the time being only if the mobile screen size is the same that I set it to.

    It’s strange that it only happens when there is a transparent header activated even though there is always a header on the iPhone regardless. Do you know if there will be a fix coming to resolve this issue? Thanks!

    #404328

    Hey!

    Yes, the fix should be included on future updates. You’re actually the only user who reported the issue.

    Cheers!
    Ismael

Viewing 16 posts - 1 through 16 (of 16 total)

The topic ‘Fullscreen Slider on iPhone’ is closed to new replies.