you can try media queries as below
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
.ipad-portrait { color: red; } /* your css rules for ipad portrait */
}
@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
.ipad-landscape { color: blue; } /* your css rules for ipad landscape */
}
I think this will help you to use css for specific resolution on Ipad can also be used in other tablets also .
If you are facing any specific issues kindly post here so we can give answer to it.
If I understand correctly, you are using a commercial theme called “Intuition Pro”? That would be primarily responsible for the output in the frontend. However, I have looked into it and see that the developer has apparently stopped working on it. Therefore, I would actually recommend that you look for a new theme, as it is questionable how long this one will continue to be supported by WordPress or PHP.
Regarding your actual question: we don’t really talk about individual devices, but rather viewports. That is, the screen width or height in which the website is displayed. With modern CSS, it’s no problem to support the different browsers on the devices. An iPad is usually 810 pixels wide (see https://blisk.io/devices/details/ipad-10), so you could try specifying individual styles around this value. Example:
@media screen and (width >= 820px) {
body { background-color: red }
}
It works exactly as described here, for example: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Hi, This did not work for me.
The only way I have been able to target an iPad is within the Gutenberg, Custom CSS;
Using Chrome Mobile Simulator ~ specifically an iPad Pro 11 (width: 834px)
https://lotusclinics.co.uk/this.jpg
@media (width: 834px) {
.tabletipad{
margin-top: 10%!important;
}
}
.
All I need is… force, 2 block column to stack at width 834px (then the iPad looks like the mobile version)
.
I just don’t know the syntax for this
I’m a little confused. On the desktop, the blocks are not stacked but always next to each other. That’s how it looks on my screen with a width of 834px, even though the blocks are slightly higher there because the content pushes them up. Otherwise, it looks the same to me as on the desktop – is that your goal there? Or have you already solved this issue?
Hi, I wanted the columns to always stack on iPad/Tablet; so that the iPad mimics the mobile where all columns are stacked
RE: https://lotusclinics.co.uk/
This worked for me
I then targeted the most popular sizes with a fixed width
@media (width: 834px) {
.colstack{
display: block!important;
width: 100px!important;
margin-right:0%;
margin-left:0%;
width:834px!important;
}
}
A clean way would be:
@media (width: 834px) {
body .is-layout-flex {
flex-direction: column;
}
}
This would arrange the blocks below each other instead of next to each other. It works fine for me in testing.
By the way, I would recommend using the code block for CSS here in the forum, see: https://wordpress.org/support/forum-user-guide/block-editor/#code-block
