Element visibility problems

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

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

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

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

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

Hi,

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

Best regards,
Ismael