Viewing 26 posts - 1 through 26 (of 26 total)
  • Author
    Posts
  • June 2, 2017 at 12:52 am #802821
    viaggiareverde

    Hi,
    i use “post slider” on one of my pages. I’ve set the rotation on automatic. When i look at it from a mobile device all the page keeps moving up and down every time the slider moves. That because titles and excerpt of my article are not equally long. so sometimes the “post slider” element is shorter (and the page goes up) and sometimes it becomes longer (and the page scroll down). That very noising when you are reading something at the bottom. can you please tell me how to block this. (it would be ok even if i have a blank space when the post slider is “shorter”).

    Thanks

    Best Regards

    June 2, 2017 at 12:36 pm #802977
    Rikard

    Hey viaggiareverde,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    June 2, 2017 at 9:08 pm #803202
    viaggiareverde

    Hi,
    Of course. My website is http://www.viaggiareverde.it

    best regards

    June 3, 2017 at 8:43 am #803312
    John Torvik

    Hi,

    To check some settings, may you provide to us your WP credentials too?

    Best regards,
    John Torvik

    June 3, 2017 at 8:51 am #803316
    viaggiareverde

    of course

    June 5, 2017 at 1:32 pm #803887
    viaggiareverde

    Did you saw the website. Can you tell me how to “block” it?

    June 6, 2017 at 4:38 am #804277
    Mike

    Hi,
    This will hide the post slider on mobile (425px) but show on tablet and above.
    Try this code in the General Styling > Quick CSS field:

    @media only screen and (max-width: 767px) { 
.avia-content-slider {display:none !important; }}

    Best regards,
    Mike

    June 8, 2017 at 6:16 pm #805695
    viaggiareverde

    Thank you for the answer. I’d like to show it also on mobile devices if possible. I find a solution for a similar problem here https://kriesi.at/support/topic/make-testimonial-and-a-content-slider-not-move-the-page-up-and-down/ but i’m not able to trasform it into a solution for my problem, can you please help me?

    Best regards

    June 10, 2017 at 1:04 pm #806305
    Mike

    Hi,
    Try this code in the General Styling > Quick CSS field:

    @media screen and (min-width: 768px) {
.avia-content-slider-inner {
min-height: 2200px !important;
max-height: 2200px !important;
}
}

    Best regards,
    Mike

    June 11, 2017 at 10:27 pm #806661
    viaggiareverde

    Hi, i’ve combined these codes to find a customized solution. I’ve reduced the min/max height to 700 because i had a big blank space on desktops with 2200px and the problem on mobile wasn’t solved. Then i decided to hide the slider for mobiles. Now it works well on desktops, because the up and down has stopped; no problems on mobiles cause they don’t see it; NOT OK on tablets because some texts are cutted (but i don’t want to increase the px number because of bigger blank space on desktops).

    So the last question, can you please telle how to modify the first ccs you give me to hide the slider even for tablets?

    PS: for any other user, don’t work with the preview cause it doesnt correctly show the changes.

    Thanks

    June 12, 2017 at 3:01 am #806680
    Mike

    Hi,

    @media only screen and (max-width: 1024px) { 
.avia-content-slider {display:none !important; }}

    Best regards,
    Mike

    June 13, 2017 at 10:46 pm #807656
    viaggiareverde

    Thanks, should i modify also this or not (changing 728px to 1024px)?

    @media screen and (min-width: 768px) {
    .avia-content-slider-inner {
    min-height: 2200px !important;
    max-height: 2200px !important;
    }
    }

    June 14, 2017 at 1:59 am #807697
    Mike

    Hi,
    I thought you wanted to block up to and including tablets, that’s why I have max-width: 1024px, so tablet landscape would be blocked :)

    Best regards,
    Mike

    June 20, 2017 at 5:56 pm #810541
    viaggiareverde

    Thanks for your asnwer. Using this code:

    @media only screen and (max-width: 1024px) { 
.avia-content-slider {display:none !important; }}

    i have a problem (only on mobile or on “less than 1024px” displays): when i click on a category from my customized menù, those post which shoul be shown are hidden. I’m sure that this CSS creates this issue because i removed that and i solved. But since i need a css code that hide the “post slider” on mobiles/tablets i’d like to know what can i do.

    best regards

    June 22, 2017 at 4:25 pm #811645
    viaggiareverde

    any news about this?

    June 25, 2017 at 12:10 am #812568
    Mike

    Hi,
    This is strange, I tried different categories at different sizes and could not find a difference. Could you add some screenshots so we can try to duplicate the issue?

    Best regards,
    Mike

    July 2, 2017 at 9:35 am #815490
    viaggiareverde

    Hi, i’ve attached two screenshot. In image 1 you can see the problem: when that css code is active, I can’t see anything in my categories.
    In image 2 you can see the same cagory page when the code is not active.

    best regards

    July 7, 2017 at 5:40 am #817612
    Ismael

    Hi,

    Please turn on the custom css class attribute so that you can apply the modification on a specific post slider element.

    // http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Best regards,
    Ismael

    July 8, 2017 at 10:09 am #818123
    viaggiareverde

    Hi,
    i’ve inserted the code:
    add_theme_support('avia_template_builder_custom_css');
    in the function.php
    Then i’ve inserted “ls-blockslider” in the “Custom CSS Class” of the Post Slider Element which is in my homepage.
    After that i added this code:

    #top .ls-blockslider {
@media only screen and (max-width: 1024px) { 
.avia-content-slider {display:none !important; }}

    in the quick css of enfold menu.
    But i still see the slider element on mobile and tablets. Maybe i did something wrong?

    July 9, 2017 at 6:08 am #818331
    Rikard

    Hi,

    You CSS doesn’t look right, please try this instead:

    @media only screen and (max-width: 1024px) { 
  .ls-blockslider {
    display:none !important; 
  }
}

    Best regards,
    Rikard

    July 9, 2017 at 11:01 am #818359
    viaggiareverde

    Now it works perfectly. Thank you!
    A last question. On tablets and devices with medium size screen, my menu goes under my logo as you can see here:
    https://www.dropbox.com/s/fueogrnghvexez3/menu%20sopra%20logo.JPEG?dl=0
    what can i do to solve this problem?

    (I’ve already tried using a logo 340×156,as Enfold suggest, but the problem still remain and i don’t like my logo in that small dimension.)

    Best regards,

    Luca

    July 9, 2017 at 2:45 pm #818382
    Mike

    Hi,
    Please go to Enfold->Header->Mobile Menu and select to show the mobile menu for tablets as well.
    Or you can use the following CSSin the General Styling > Quick CSS field:

    @media only screen and (max-width: 1024px) {
nav.main_menu {display:none !important;}
#advanced_menu_toggle, #advanced_menu_hide {display:block !important;}
}

    Best regards,
    Mike

    July 12, 2017 at 9:59 pm #820238
    viaggiareverde

    Thank you, now it works perfectly.
    Best regards

    July 13, 2017 at 1:51 am #820290
    Sarah

    Hi!

    We’re glad that the team was able to help. Do you need further help with this topic?

    Best regards,
    Sarah

    July 13, 2017 at 9:04 am #820400
    viaggiareverde

    Hi, all problems are now solved. You can close it if you want.

    Best regards

    July 13, 2017 at 11:32 am #820466
    Ismael

    Hi,

    Great! Glad we could help. :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 26 posts - 1 through 26 (of 26 total)
  • The topic ‘Post slider: how to block it?’ is closed to new replies.