Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 3, 2018 at 3:50 pm #1017552
    su2juvie

    Dear reader,
    I made an Enfold website with 2 extra classes for some special images, they are added in the quick css. 1 extra class for bigger screens, 1 for smaller screens like phones and ipads. Everything works fine, except on ipad landscape mode. Then I see both extra classes, where there should be only one.

    I used the codes below, and I tried a lot of different numbers for the px.. how can I persuade an Ipad landscape to show only 1 of the extra classes? I am using WP Bakery on my pages, can choose there for ‘extra class name’.

    Best wishes, Judith

    @media screen and (max-width: 800px) {
    .no_mobile {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
    }
    }

    .mobileShow {display: none;}

    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 769px){
    .mobileShow {display: inline;}
    }

    October 4, 2018 at 7:31 am #1017729
    Rikard

    Hey su2juvie,

    I think you will have to adjust your media queries a bit, this for instance will target most tablet screens:

    @media screen and (max-width: 800px)

    Please try changing it to a higher value:

    @media screen and (max-width: 1024px)

    Best regards,
    Rikard

    October 4, 2018 at 9:11 am #1017771
    su2juvie

    Hi Rikard, thanks for your reaction. The ipad landscape shows both extra classes, where it should only show 1. That seems impossible with the codes I am using. Something must be wrong somewhere.. I tried different ipads, they all react the same.

    The website is http://www.superduo.nl, and the problem is the circles at the bottom of the screen. On screens size ipad landscape and larger, I would like to show the row of circles. On screens size ipad portrait and smaller, I would like to show the one circle image (home) or circle-slideshow (all other pages).

    Hope you understand what I mean. I tried so many different combinations of px amounts, nothing seems to work the way it should.
    Judith

    October 4, 2018 at 10:50 am #1017809
    Rikard

    Hi Judith,

    Thanks for the link. Your CSS seems to be applying just fine, this what I see:

    @media screen and (max-width: 800px) {
.no_mobile {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
}
}

    But you will need to adjust the 800px value to something higher like 1024 if you want it to hide for tablets as well. You might be getting cached results on your actual device, so please make sure that you are clearing your browser cache before reloading. Or check in an incognito window using Chrome.

    Best regards,
    Rikard

    • This reply was modified 6 years, 6 months ago by Rikard.
  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.