Search Results for 'ipad'

[Marj]

Marj

#268814

The NEW iPad screen width (landscape) is 1080. The older iPad is 1024. Is there any way you can change the Row Layout tablet breakpoint to break at 1080 instead of 1024? If not (as I’m sure it would have MAJOR ramifications making a change like that), can you tell me how I can modify that myself?

[Marj]

Marj

#268814

The NEW iPad screen width (landscape) is 1080. The older iPad is 1024. Is there any way you can change the Row Layout tablet breakpoint to break at 1080 instead of 1024? If not (as I’m sure it would have MAJOR ramifications making a change like that), can you tell me how I can modify that myself?

[amrapali.rai]

amrapali.rai

#268761

I have the same issue. I added the CSS code provided but search is not working for me in desktop. It works on mobile and iPad. Could you please help?

[henri]

henri

#268338

Hello,

I am in the process of migrating to Kadence.
My Kadence staging website is staging2.DearReal.com
login pawpatrol
password ninjagolego

The fonts in my header are not showing in Safari on macOS desktop (they are white on white).
I believe this is related to a media query issue as my mobile website menu has white on red, and Safari might be picking up the white from there.

I use CSS media queries to edit the Kadence mobile menu to my liking.
Works great with my android device, Firefox on macOS, Safari on Iphone.
The unformatted Kadence mobile menu on iPad shows up again irrespective of the different pixel sizes I have tested in my CSS media queries.
There must be some conflict between my CSS media queries and Kadence’s.

Would you please let me know what can be done?
Would moving to a Kadence Pro solve my issues?
I understand you are in business (most of us are, me included) while I am warry about adding to my WP. It usually only slows things down.

Many thanks for your help,
Henri

[henri]

henri

#268338

Hello,

I am in the process of migrating to Kadence.
My Kadence staging website is staging2.DearReal.com
login pawpatrol
password ninjagolego

The fonts in my header are not showing in Safari on macOS desktop (they are white on white).
I believe this is related to a media query issue as my mobile website menu has white on red, and Safari might be picking up the white from there.

I use CSS media queries to edit the Kadence mobile menu to my liking.
Works great with my android device, Firefox on macOS, Safari on Iphone.
The unformatted Kadence mobile menu on iPad shows up again irrespective of the different pixel sizes I have tested in my CSS media queries.
There must be some conflict between my CSS media queries and Kadence’s.

Would you please let me know what can be done?
Would moving to a Kadence Pro solve my issues?
I understand you are in business (most of us are, me included) while I am warry about adding to my WP. It usually only slows things down.

Many thanks for your help,
Henri

[michaeljdeibert]

michaeljdeibert

#268134

Hi Ben,

2. That did the trick! And it does make sense that the grid would need included since the breakpoint is different. It just was puzzling why you had chosen 1024px in that code (which we see now was an error). Especially as you’ve commented elsewhere on the forum that desktop breakpoint was 1024px and upwards. And furthermore made confusing because I have other css elements with a media query that were changed at the 1024px.

1. The “lovely” limitations between variables, speed, size, etc. Definitely complicates things with trying to create a built-in, user selected screen size for the breakpoints. Thinking outside the box and from outside the theme code…

If we ignore a complete breakpoint variable and just focus on allowing the user to select the orientation, ‘orientation’ isn’t a variable in the same way. It’s a static element pulled from the device, as each device already triggers which media query to load. Page caching would be affected, yes, because there are now instead of three breakpoints (desktop, tablet, mobile), there would be five (desktop, tablet-portrait, tablet-landscape, mobile-portrait, and mobile-landscape). But once they page is cached on the site’s server, it wouldn’t be a major issue.

And yes, it would mean having to add the actual css for those each screen size & screen orientation combination, which would result in a larger css file. But would that really have a significant effect though? (Unless I’m missing something, that’s only two more blocks of css.)

To keep things clean and streamline for those who don’t want to include orientation, (and a way to give incentive to people buying pro) can it be a Pro element that is turned on or off like Hooked Elements, or Conditional Headers? That way, if the user doesn’t want to deal with Orientation, it’d load a styles.css without orientation included (the current css) – but if they turned that on, then they’d simply load the css that includes it? Nothing would be dynamic, just an if/else argument.

In terms of practical application, I’m basing a lot off this list of common screen and tablet sizes/viewports: https://mediag.com/blog/popular-screen-resolutions-designing-for-all/
[and not to add another wrench in, but I’m wondering if the 768px is the best choice for tablet/mobile breakpoint… though I think this is more connected to the customiser layout?]

At quick glance, it looks like you’ve chosen to focus on Apple devices (which are the larger share, according to other sources). Thus the 1024px breakpoint between desktop and tablet, and the 768px breakpoint between tablet and mobile. Those are the max and min sizes for all iPads (except Pro but that’s larger).

But for mobile screens, the max size of the shortest side in portrait mode is only 480px. Meanwhile, the min size of the smallest side of a tablet is 600px (Nexus 7). If we look at the longest side of mobile screens, which would determine the width in landscape layout (commonly used even on mobile screens, esp to watch videos), then the min size is 568px (iPhone 5 and iPod) – which is still larger than all mobile screens in portrait mode. Right now, with the current Kadence tablet/mobile breakpoint of 768px, simply adding ‘orientation’ to the media query would create a mess. BUT, if that breakpoint were moved to 568px, it’d make more sense and be more consistent across devices.

So if we go back to the concept of adding ‘orientation’ to the media query, with static breakpoints of 1024px and 568px (changed from the 768px), there would still only be a total of five possible grid options. If this is something able to be turned on/off like the other Pro addons, then for anyone not wanting to invoke screen orientation, it would stay simplified to just the three.

[michaeljdeibert]

michaeljdeibert

#268047

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!

[michaeljdeibert]

michaeljdeibert

#268047

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!

[Anders]

Anders

#267328

Hi,
I have a wide screen slider on top of this site
When you look on smaller laptops or Ipads, the images don’t resize correctly, you see it clearly on the bandphotos where the members to the left and right are outside the viewing area.

How do I adjust this?

Best Regards,

Leif

[Anders]

Anders

#267328

Hi,
I have a wide screen slider on top of this site
When you look on smaller laptops or Ipads, the images don’t resize correctly, you see it clearly on the bandphotos where the members to the left and right are outside the viewing area.

How do I adjust this?

Best Regards,

Leif

[Netzlichter]

Netzlichter

#266823

This reply has been marked as private.

[Netzlichter]

Netzlichter

#266796

Desktop Menu on iPad/ Tablet. Not the mobile Menu. I have an iPad Pro which is showing the desktop menu on tablet…

[Karla]

Karla

#266795

Hello Tobias,

Thank you for reaching out to us.

I tried to replicate the issue on my test website regarding the mobile menu items and viewed it on Browserstack’s iPad device but the issues did not happen. Please could you send us a link to your webpage so we can see the issue and better replicate it on our end?

Can you please integrate a switch to choose open the link in new tab or in same tab?

Kindly log this as a feature request if you haven’t yet – https://www.kadencewp.com/roadmap-kadence-theme/feature-requests/. However, please note that we cannot give an ETA of when this request will be available as the development team considers certain factors before implementing new ones.

Best Regards,
Karla

[Netzlichter]

Netzlichter

#266775

Dear Kadence Team,

Bug since 1.0.27: On iPad/ Touch device. Desktop menu. If the primary menu item has a link and a sub menu, it no longer opens the sub menu when you tap on the primary menu item. So you cannot open the submenu on ipad. Before 1.0.27: First tap on primary menu item open sub menu, second tap should open the link.

With 1.0.27 it’s not longer possible to use the sub menu with an iPad, when the primary item has a real link. It is only working when you put # as a link. I don’t know how other tablets behave…

I want to try to bring this up again:

– Header and Footer Social Element:

Can you please integrate a switch to choose open the link in new tab or in same tab? Maybe at the element or in the Customizer Social Links. Dunno what is the easiest way for you :)! Because for example I link the Instagram icon to my instagram feed on my website instead of the instagram account.

Have a great day,
Tobias

[Netzlichter]

Netzlichter

#266775

Dear Kadence Team,

Bug since 1.0.27: On iPad/ Touch device. Desktop menu. If the primary menu item has a link and a sub menu, it no longer opens the sub menu when you tap on the primary menu item. So you cannot open the submenu on ipad. Before 1.0.27: First tap on primary menu item open sub menu, second tap should open the link.

With 1.0.27 it’s not longer possible to use the sub menu with an iPad, when the primary item has a real link. It is only working when you put # as a link. I don’t know how other tablets behave…

I want to try to bring this up again:

– Header and Footer Social Element:

Can you please integrate a switch to choose open the link in new tab or in same tab? Maybe at the element or in the Customizer Social Links. Dunno what is the easiest way for you :)! Because for example I link the Instagram icon to my instagram feed on my website instead of the instagram account.

Have a great day,
Tobias

[jochemkroon]

jochemkroon

#264254

Is there any way to input a non-breaking space? Or an invisible character that serves visually as a space?

The safari browser seems to consistently break up those spaces.

Even with the disconnected button, on my iPad, the button is to the right of the field and “Join Newsletter” broken up.

[jochemkroon]

jochemkroon

#264252

Thank you for the solutions. I yet have to try them. Especially cutting the button loose sounds promising.

What I found out is that the issues happen in my iOS safari browser only. At least, on two ipads I checked and they broke the text in the button, as well as the text in one of the tabs of the row-template with the tabs.

Does that make any sense to you?

[Kathy]

Kathy

#263590

Hi Hannah,

It seems the Ipad shows the logo for the desktop, not using the mobile logo. So I was wondering if there is a CSS trick for using the smaller logo for the Ipad as well?

Also, I did change the slider width, but it still stretches across full width. I’m using the Image Carousel.

Thank you,
Kathy

[Kathy]

Kathy

#263505

Hello,

I’d like to try and shrink the logo on my site for Ipads to be smaller like the mobile phones for both portrait and landscape orientation. How do I go about doing this?

Also, any way I can make the Home Slide “Images in Carousel to NOT be full width? Maybe 1170px wide?

Thank you,
Kathy

[Kathy]

Kathy

#263505

Hello,

I’d like to try and shrink the logo on my site for Ipads to be smaller like the mobile phones for both portrait and landscape orientation. How do I go about doing this?

Also, any way I can make the Home Slide “Images in Carousel to NOT be full width? Maybe 1170px wide?

Thank you,
Kathy

[phillip.crane]

phillip.crane

#263323

All. I think I’m losing my mind. I’m trying to login to my account to get my license key from an iPad. Nowhere on this website can you get to your account page to see license codes or available downloads. Or am I missing something.

[phillip.crane]

phillip.crane

#263323

All. I think I’m losing my mind. I’m trying to login to my account to get my license key from an iPad. Nowhere on this website can you get to your account page to see license codes or available downloads. Or am I missing something.

[Kathy]

Kathy

#263218

Hello,

I used blocks for the first time to display a photo gallery with links to the individual photo pages. However, I tried clicking on the photo link and it is not working.

Looking at the block code this is what is displayed:
<li class=”kadence-blocks-gallery-item”>
<div class=”kadence-blocks-gallery-item-inner”>
<figure class=”kb-gallery-figure kb-gallery-item-has-link kadence-blocks-gallery-item-hide-caption”>
<div class=”kb-gal-image-radius” style=”max-width: 1024px;”>
<div class=”kb-gallery-image-contain kadence-blocks-gallery-intrinsic” style=”padding-bottom: 69.921875%;”></div>

Has anyone else run into this problem? It seems the image should be clickable, but it’s not.

Thanks,
Kathy

[Kathy]

Kathy

#263218

Hello,

I used blocks for the first time to display a photo gallery with links to the individual photo pages. However, I tried clicking on the photo link and it is not working.

Looking at the block code this is what is displayed:
<li class=”kadence-blocks-gallery-item”>
<div class=”kadence-blocks-gallery-item-inner”>
<figure class=”kb-gallery-figure kb-gallery-item-has-link kadence-blocks-gallery-item-hide-caption”>
<div class=”kb-gal-image-radius” style=”max-width: 1024px;”>
<div class=”kb-gallery-image-contain kadence-blocks-gallery-intrinsic” style=”padding-bottom: 69.921875%;”></div>

Has anyone else run into this problem? It seems the image should be clickable, but it’s not.

Thanks,
Kathy

[Rachel Ann Smit]

Rachel Ann Smit

#262960

Hi Ben and Hannah,
Our promotion went live so I disabled the test elements! I’ve since set it back up for you to see on the special notice page (link in above reply marked private.) Currently, it is set to Fixed On Top, which flashes on scroll on mobile (iOS device, tested on Chrome, Duck Duck Go, and Safari). Works on an iPad, works on desktop.

To work around the flashing behaviour and the temporary disappearing when reaching the top of the page, I remade the element, this time set to “default” (rather than Fixed) and placed it throughout the site where I wanted it to appear. So it is not affecting my site at this time, but I would have preferred a more interactive implementation over what I have now.

Much thanks to you both!

• This reply was modified 5 years, 2 months ago by Rachel Ann Smit.

[Inga]

Inga

#262573

This reply has been marked as private.

[Netzlichter]

Netzlichter

#262565

This reply has been marked as private.

[Amy P]

Amy P

#262217

This reply has been marked as private.