Add orientation to 1024 px (currently set for tablet breakpoint)

[Anonymous 125270]

Anonymous 125270

September 23, 2021 at 10:18 pm

Hi,

1024px is a tricky screen size to target. It’s the upper range of the longest possible resolution size for tablets (according to THIS chart.

Some designers want to keep all tablet sizes the same, whether in portrait or landscape orientation. But others, myself included, want to use a horizontal orientation when the tablets are horizontal, especially when sidebars are included (as they often are on desktop layouts).

Right now, that’s not possible via Customiser and I’m running into troubles achieving it via CSS.
[Note, there is already a theme feature request with 49 upvotes… so this customisation seems wanted.]

It’s been noted that the current Kadence breakpoints are:
– 1024px and above: Desktop
– below 1024px to 768px: Tablet
– below 768px: Mobile

Except when viewing the actual @media queries in all.min.css, the actual desktop layout option targets 1025px and above… not 1024px.
@media screen and (min-width: 1025px){.has-sidebar .content-container{display:grid;grid-template-columns:5fr 2fr;grid-gap:var(--global-xl-spacing);-webkit-justify-content:center;justify-content:center}...}

1. Could we get an option, ideally via customiser, to include orientation options for tablets? Or get a query rewrite that includes orientation that is then customisable in Customiser with a select option? i.e. to allow landscape orientation to display desktop layout. (if not, then it defaults to tablet layouts instead.)

______________

2. My Current CSS Issue:

Working with Ben, we’ve included css to adjust the paddings regarding my right sidebar. The target screen size in our css is min-width:1024px.

/* remove padding for sidebar template and allow full-width within inner content area */
@media screen and (min-width:1024px) {
.has-sidebar .content-container {
max-width: 100%;
padding: 0;
grid-template-columns: 70% 30%;
grid-gap: 0;
}
.has-sidebar .site .content-container .alignwide, .has-sidebar .site .content-container .alignfull {
margin-left: -90px;
margin-right: -60px;
}
.has-sidebar .site .content-container .wp-block-kadence-column .alignwide, .has-sidebar .site .content-container .wp-block-kadence-column .alignfull {
margin-left:0;
margin-right:0;
}
}

It should be overwriting the “grid-template-columns:” choice in the all.min.css code cited above – but it’s not. And changing the screen pixel to 1023px to force a tablet-landscape mode is not displaying correctly either.
[Tested both in Chrome developer in their desktop = 1024px screen size, but also in a custom iPad-Horizontal size – and on my ipad itself in landscape orientation. As usual, all caches cleared, no change.]

However, when I adjusted the few other css changes that involve the 1024px media query, those ARE adjusted. So do I need to target a more specific class to force desktop layout on 1024px? or go even broader?
I have my child theme… should that css go into the child theme’s styles.css instead of Customiser’s “Additional CSS” in order for it to load even earlier?

Help would be appreciated. Thanks!