Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 11, 2016 at 8:32 pm #563476
    bobfurgo

    I have a full width easy slider with the custom css class only-desktop and a full screen slider with a class of only-mobile.

    I have this quick css entered:
    @media only screen and (max-width: 480px) {
    .only-desktop { display: none !important; }}

    @media only screen and (min-width: 480px) {
    .only-mobile { display: none !important; }}

    Looks great on desktop and ipad, but on mobile both sliders are displayed. When I change the pixel values for both to 990, both sliders show up on both ipad and mobile. When I change the pixel values to 769, both sliders show up on both ipad and mobile as well. I also tried:

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

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

    which also shows both sliders on both mobile and tablet – (pixel values were suggested in this post: https://kriesi.at/support/topic/mobile-only-and-desktop-only-on-tablet/)

    Could you please help me with this? Thank you guys so much!

    January 12, 2016 at 9:07 am #563748
    Rikard

    Hey digitalammo,

    Try the following as well: 

    @media only screen and (max-width: 480px) {
#fullscreen_slider_0 {
display:none !important;
}
}

    Regards,
    Rikard

    January 12, 2016 at 7:45 pm #564126
    bobfurgo

    Hi Rikard!

    That works. But I actually wanted the fullscreen slider to display on mobile and not the fullwidth easy slider. I tried changing it to this but it didn’t work:

    @media only screen and (max-width: 480px) {
    #fullwidth_slider_0 {
    display:none !important;
    }
    }

    Thank you!

    January 13, 2016 at 8:51 am #564419
    Rikard

    Hi,

    Ok, try this instead:

    @media only screen and (max-width: 480px) {
#full_slider_2 {
display:none !important;
}
}

    Regards,
    Rikard

    January 13, 2016 at 11:09 am #564516
    bobfurgo

    Perfect. Thank you Rikard!

    January 13, 2016 at 10:09 pm #565044
    bobfurgo

    One more thing. Could you please help me with the same thing for the About page? I’d like to display only the fullscreen slider on mobile while only the fullwidth slider is displayed on desktop.

    thank you so much.

    January 14, 2016 at 5:18 am #565205
    Rikard

    Hi,

    The code is the same, all you have to do is replace the id of slider which you can find by inspecting the element on the page:

    @media only screen and (max-width: 480px) {
#full_slider_1 {
display:none !important;
}
}

    Best regards,
    Rikard

    January 14, 2016 at 8:42 am #565244
    bobfurgo

    I was trying to determine what the slider ID was but kept choosing the wrong part. This helps reinforce that I was headed in the right direction with it. Thank you for your help Rikard! :)

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘mobile only and desktop only issues’ is closed to new replies.