Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #942941

    Hi!

    Earlier I got a few bits of code from Ismael that helped me sort out a problem with some elements not showing on different sizes of screens, even if I was using the visibility options on the element.

    The problem I just discovered now, is that the screen size-options are working weird.
    If I choose “hide on tablet landscape” it hides on desktop as well (macbook pro, but ok on 21 inch imac).
    And somehow tablet landscape and portrait are working “together” – showing the same elements even if I want to hide on one of them.
    Hard to explain to problem – but check the site: https://www.sudersand.se/strandvilla-bondans/
    I´ve added a icon box with the text “small” or “large” to show the problem.

    The codes I´ve got earlier is:

    @media only screen and (min-width: 990px) {
    .responsive.av-no-preview #top #wrap_all .av-desktop-hide, .responsive.av-no-preview #top #wrap_all .av-desktop-font-size-hidden, .responsive.av-no-preview #top #wrap_all .av-desktop-font-size-title-hidden {
    display: block;
    }
    }

    @media only screen and (max-width: 1280px) and (min-width: 768px) {
    .responsive.av-no-preview #top #wrap_all .av-medium-hide, .responsive.av-no-preview #top #wrap_all .av-medium-font-size-hidden, .responsive.av-no-preview #top #wrap_all .av-medium-font-size-title-hidden {
    display: none;
    }
    }

    @media only screen and (min-width: 1281px) {
    .responsive.av-no-preview #top #wrap_all .av-desktop-hide, .responsive.av-no-preview #top #wrap_all .av-desktop-font-size-hidden, .responsive.av-no-preview #top #wrap_all .av-desktop-font-size-title-hidden {
    display: none;
    }

    Something here that might be wrong regarding to the screen sizes?

    Regards Johan

    #943923

    Hey Johan,

    Thank you for using Enfold.

    If I choose “hide on tablet landscape” it hides on desktop as well (macbook pro, but ok on 21 inch imac).

    Do the elements display if the browser screen is resized? What is the actual screen resolution of the laptop or macbook?

    Best regards,
    Ismael

    #943928

    Hi!

    Isn´t the screen width around 1280px on a macbook pro 13.3….?
    I have a feeling that there is something missing in the code above. There is nothing refering to screen size of tablet landscape of 1024 px. What do you think?

    The reason of why I got the code in the first case was that there was some sections not showing at all, but we fixed that.
    (see https://kriesi.at/support/topic/not-showing-on-iphone-tablet-and-more/#post-921260)

    Regards Johan

    #944421

    Hi,

    Thank you for the info.

    Look for these css media queries and adjust the viewport.

    =====

    @media only screen and (max-width: 1280px) and (min-width: 768px) {
    

    Adjust the max-width value to 1279px.

    @media only screen and (max-width: 1279px) and (min-width: 768px) {
    

    =====

    @media only screen and (min-width: 1281px) {
    

    Adjust the min-width value to 1280px

    @media only screen and (min-width: 1280px) {
    

    Toggle the theme options or resaved it to regenerate the stylesheets.

    Best regards,
    Ismael

    #944431

    Sorry, didn´t work.
    Portrait is still showing sections/ elements, even though I choose to hide on portrait (showing landscape sections/ elements). And vice versa of course, If I choose to hide in landscape – they disappear on portrait aswell.

    Regards Johan

    #944991

    Hi,

    The orientation settings in the Screen Options may not cover every available devices in the market. You should think of Tablet Landscape and Tablet Portrait as the same option.

    Best regards,
    Ismael

    #945020

    With all respect Ismael, but are you serious with me now?
    I do expect that a regular ipad with a standard screen size of 768 x 1024 px should på be able to show both portrait and landscape.
    Its not the ipad that has a problem. My website have some coding that doesn´t work, and I need your help to figure it out.
    Why else do you have the visibility options for desktop, portrait, landscape and mobile…..?

    Regards Johan

    #945237

    Hi,

    We’ve modified the default screen options because of the previous issue that you have with iPad devices. This is how the screen options work in your installation now.

    Desktop: hide the element when the screen width is more than 1281px.
    Landscape: hide the element when the screen width is between 1280px and 768px
    Portrait: hide the element when the screen width is between 767px and 480px
    Mobile: hide the element when the screen width is less than 479px

    These options should work for typical or common device break points but it won’t be able to cover every devices in the market. The maximum width of a macbook pro device is 1280px so it belongs to the “Landscape” category or option because of the previous css modification that we used.

    Best regards,
    Ismael

    #945280

    I understand!

    But isn´t possible to modify the code or add some to get it like this:

    Desktop: hide the element when the screen width is more than 1025px.
    Landscape: hide the element when the screen width is between 1024px and 768px
    Portrait: hide the element when the screen width is between 767px and 480px
    Mobile: hide the element when the screen width is less than 479px

    That would solve the issue, don´t you think?
    =)

    Regards Johan

    #945721

    Hi,

    That is possible. Replace the previous css codes with this one.

    @media only screen and (min-width: 990px){
    .responsive.av-no-preview #top #wrap_all .av-desktop-hide,
    .responsive.av-no-preview #top #wrap_all .av-desktop-font-size-hidden,
    .responsive.av-no-preview #top #wrap_all .av-desktop-font-size-title-hidden{display:block;}
    }
    
    /* Tablet Portrait size to standard 960 (devices and browsers) */
    @media only screen and (min-width: 768px) and (max-width: 989px) {
    .responsive.av-no-preview #top #wrap_all .av-medium-hide,
    .responsive.av-no-preview #top #wrap_all .av-medium-font-size-hidden,
    .responsive.av-no-preview #top #wrap_all .av-medium-font-size-title-hidden{display:block;}	
    }
    
    @media only screen and (min-width: 1025px){
    .responsive.av-no-preview #top #wrap_all .av-desktop-hide,
    .responsive.av-no-preview #top #wrap_all .av-desktop-font-size-hidden,
    .responsive.av-no-preview #top #wrap_all .av-desktop-font-size-title-hidden{display:none;}
    }
    
    /* Tablet Portrait size to standard 960 (devices and browsers) */
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .responsive.av-no-preview #top #wrap_all .av-medium-hide,
    .responsive.av-no-preview #top #wrap_all .av-medium-font-size-hidden,
    .responsive.av-no-preview #top #wrap_all .av-medium-font-size-title-hidden{display:block;}	
    }
    

    I’m not sure if this is going to solve the issue entirely because, as far as I remember, you wanted the “landscape” option to cover screens up to 1280px because of your iPad Pro device. This is the actual css media query for iPad Pro.

    /* ----------- iPad Pro ----------- */
    /* Portrait and Landscape */
    @media only screen 
      and (min-device-width: 1024px) 
      and (max-device-width: 1366px) 
      and (-webkit-min-device-pixel-ratio: 1.5) {
    }
    
    /* Portrait */
    @media only screen 
      and (min-device-width: 1024px) 
      and (max-device-width: 1366px) 
      and (orientation: portrait) 
      and (-webkit-min-device-pixel-ratio: 1.5) {
    }
    
    /* Landscape */
    @media only screen 
      and (min-device-width: 1024px) 
      and (max-device-width: 1366px) 
      and (orientation: landscape) 
      and (-webkit-min-device-pixel-ratio: 1.5) {
    
    }

    Best regards,
    Ismael

    #945727

    Thanks Ismael!

    I´ll try that!
    But I think where all the confusion came from, I do not have an ipad PRO, just a regular ipad. =)
    And I never wanted the landscape to cover the desktop size on a pro.
    All I want is for the responsive to work as usual, where an ipad is 1024px in landscape and 768px in portrait.
    Regarding what I just mentioned, shall I still use to code you provided now?

    Thanks for your patience! =)

    Regards Johan

    #945780

    Hi,

    Thank you for the info. Yes, please try the css codes. :)

    Best regards,
    Ismael

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