-
Posts
-
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!
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,
IsmaelHi!
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!
AndyHey!
The fullscreen slider doesn’t extend past the initial browser screen height when I rechecked the page. I think it is fixed.
Cheers!
IsmaelThe 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?
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!
IsmaelHi!
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,
IsmaelHey!
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,
YigitThanks 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?
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!
IsmaelNot 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!
- The topic ‘Fullscreen Slider on iPhone’ is closed to new replies.