On high-resolution tablet, show mobile header / sidebar / background settings

Dear,

Please check the link in private.

In F12 Console, select iPad Air (1180×820) in Landscape.

In that resolution, the website shows the desktop header & theme pages background. However, it doesn’t fit, it’s not a good parameter to display in that resolution. I want to display MOBILE header & MOBILE page background settings on high-resolution tablets. How can I do that?

And same issue regarding the Vertical sticky navigation, I don’t want to display it on high-resolution tablets. I want to display the Mobile Sidebar on high-resolution tablets. How can I do that?

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to say but right now there is no option in Theme Settings available for that. It requires Customization and this is beyond our limitations and support policy scope. Hope you can understand our limitations.

If you’d like to contact us, we are here for whatever questions you may have.

Kind Regards

[Jeriss Cloud Center]

Hi Luke,

Sorry to say but you clearly need to do something about it.

Tablets are Tablets
Desktop is Desktop.

Your theme displays content based on resolution, but it should take into account the TYPE of device. No matter if the resolution of the screen is high, if the device is a tablet, your theme should still display TABLET content (and NOT desktop content).

Otherwise the theme settings are completely biased, so what’s the point of having tablet specific settings if they are not respected on some tablet devices?

Thanks

• This reply was modified 1 year, 1 month ago by Jeriss Cloud Center.

Hi,

In CSS, there is no practical solution or ready-to-use @media rule to target specific styles to some device category which could conditionally be called a “Tablet”. Not an iPad or any Android tablet hasn’t one universal tablet standard and doesn’t provide to a browser key value by which it can be 100% recognized as “Tablet” except for its viewport size.

This is why both WBPakery and Elementor target their “Tablet” responsive settings only by screen width using CSS breakpoints such @media (max-width: 1024px) {} and etc. For example, this can be seen in Elementor frontend where they are targeting tablets only as specific screen width (https://prnt.sc/1s2V25Qw1hsJ), in this case, it’s 1024px. Our theme didn’t adds or rewrite any other value and only adapts to options already present in builders and since the common “Tablet” breakpoint in popular plugins and page builders is 1024px, it also was chosen in our theme to maximize plugin compatibility.

Kind Regards

[Author]

Posts