Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • October 24, 2014 at 9:05 am #340517
    simonac

    Hi i have a problem with my hp on mobile devices.

    I have a fullscreen slider at the top and in portrait mode it is cut of. How to fix that?

    Tested on Android and os emulators.

    Simon

    October 24, 2014 at 10:51 am #340540
    4jDesigns

    Hi Simon

    If it is the same issue I am having where I have a background image which has most of the imagery at the bottom and captions are centered. Firstly I re-positioned the background to bottom align in quick css. I did it using the function in the slider options but it did not work for some reason. I also changed the sizing to full height rather than full width ( I made images to suit this so you may not need to).

    .avia-fullscreen-slider .avia-slideshow > ul > li { background-position: center bottom !important; background-size: auto 100% !important; }

    Then for mobile devices I had to tweak it a bit because the header is now visible rather than hidden until scrolled. So I added this too:

    @media only screen and (max-width:640px) { .avia-fullscreen-slider { top:-100px;margin-bottom:-100px;} }
@media only screen and (max-width:360px) { .avia-fullscreen-slider { top:-140px;margin-bottom:-140px; } }

    The first media query is for mobile landscape which I only bumped up a bit to suit.
    The second I pushed a bit more as it is for the portrait version and needed it.
    I also made sure the next section was pulled up to meet it because if not there would be a gap created by the ‘negative lift’.

    Well hope this helps as a guide.

    Jay

    • This reply was modified 10 years, 1 month ago by 4jDesigns.
    October 24, 2014 at 2:52 pm #340620
    Yigit

    Hi!

    You can also turn on custom CSS field for ALB elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
    and add a secondary slider on your page which would be displayed only on mobile. You can give your new slider “mobile-slider” for a class and old one “desktop-slider” and then add following code to Quick CSS 

    @media only screen and (max-width: 768px) {
.desktop-slider { display: none !important; }}
@media only screen and (min-width: 769px) {
.mobile-slider { display: none !important; }}


    @4jdesigns     Thank you Jay for your input! :)

    Regards,
    Yigit

    October 24, 2014 at 4:29 pm #340675
    simonac

    Hi Yigit,

    i did that but it does not seem to work. Tested again on android and os emulator.

    October 25, 2014 at 3:41 am #340872
    Ismael

    Hey!

    Thank you for using Enfold.

    This technique has been tested on a few other sites. It should work. Please create a test page where you added the sliders with the custom css classes. We would like to inspect it.

    Best regards,
    Ismael

    October 25, 2014 at 2:15 pm #340954
    simonac
    This reply has been marked as private.
    October 27, 2014 at 9:32 am #341383
    Ismael

    Hey!

    You didn’t add another slider on top or below the other one. And the css code to hide or show the sliders is missing. Please review Yigit’s suggestion. 

    @media only screen and (min-width: 989px) {
.mobile-slider {
display: none;
}
}

    Regards,
    Ismael

    October 27, 2014 at 10:09 am #341402
    simonac

    Hi Ismael,

    i use exactly the code Yigit gave me:

    @media only screen and (max-width: 768px) {
.desktop-slider { display: none !important; }}
@media only screen and (min-width: 769px) {
.mobile-slider { display: none !important; }}

    and of course i added another slider. see here:
    http://imgur.com/1L5TMTL

    (your code is slightly different from what yigit gave me. – 998px vs. 769px)

    October 28, 2014 at 11:09 am #342131
    Ismael

    Hey!

    Yes, you added a slider but it’s still the same fullscreen slider. You need to create a new slider, a fullwidth slider maybe, that will fit exactly as you want it on portrait mode.

    Cheers!
    Ismael

    October 28, 2014 at 12:18 pm #342173
    simonac

    So does it mean i have to cut the image to a max width of 768px?

    October 30, 2014 at 1:27 pm #343374
    Ismael

    Hi!

    Yes, create a new slider that will fit exactly for portrait mode. Use the suggestion above to either show or hide the sliders.

    Best regards,
    Ismael

    November 11, 2014 at 12:29 pm #349297
    simonac

    I did create an image with the width of 768px and put it into the mobile slider but on mobile-portrait mode it is still not correct.

    November 12, 2014 at 8:19 pm #350298
    Ismael

    Hey!

    What is the actual screen resolution of the mobile device that you’re using? Please try to use a full width slider instead of the full screen slider if you’re not satisfied with how the fullscreen slider works on mobile devices. Or hire a freelance developer to configure the full screen slider to work according to your needs. For further modifications, please visit Envato Studio or Werkpress.

    Regards,
    Ismael

    January 28, 2016 at 9:23 pm #574095
    GrantNewton

    The reason this happens is most likely because the header css changes to relative on mobile, but the fullscreen slider is still measuring your device’s entire viewer window instead of subtracting the space your header takes up. If you change the header css to be absolute, the dimensions of the fullscreen slider should match those of your device.

    Caveat: This will “hide” the top part of your slider image behind the header.

    If your breakpoint is not the standard 768 like below, change it to whatever your breakpoint is.

    @media only screen and (max-width: 768px) {
.responsive #top #wrap_all #header {
    position: absolute;
}
}
    February 1, 2016 at 8:10 am #575610
    Ismael

    Hi!


    @GrantNewton    : Thanks for sharing. :)

    Best regards,
    Ismael

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