-
Posts
-
Hello. Does anyone know how to prompt users to rotate their ipad screen from portrait to landscape with a message? I’ve found this clip that works well:
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) { body { -webkit-transform: rotate(90deg); width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; } }However I’d like to somehow include a message with a .5 opacity black background asking the user to rotate the screen. Any suggestions?
Hey!
You could add a custom message that only appears on portrait, add this at the very end of your theme / child theme functions.php file:
add_action('wp_footer', function() { ?> <div class='rotate-message'>Rotate</div> <?php });And Quick CSS:
.rotate-message{ display: none; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) { .rotate-message{ display: block; } }Cheers!
JosueHi Josue! Thanks for this! It looks like it’s exactly what I need. However, the code doesn’t seem to be registering. I tried placing the css in the child theme’s css instead of the quick CSS area but that didn’t seem to work either. Any thoughts?
I’ve added the
add_action('wp_footer', function() { ?> <div class='rotate-message'>Rotate</div> <?php });back into the child theme’s functions.php so you won’t need to enter that area. Thanks!
Hi!
Change the CSS code to:
.ipadportrait { display: none; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) { .ipadportrait { display: block; } }Best regards,
JosueHello. It looks like that didn’t work either. I see that the class you provided in the css above differs from that of the class in the functions.php snippet, why is this?
Hey!
We are working on your ticket please wait while we update the results here soon.Create a color section and hide the color section by default.
#colorsection { display:none; }Use media queries to show it only in portrait mode on iPad
/* Portrait */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { /* Your custom CSS to show content */ #colorsection { display:block!important; } }for more info please check https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Cheers!
VinayHow do I go about hiding the rest of the site in ipad portrait? Can I use
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) { body { display: none !important;}}and then somehow make the #colorsection an exception?
Hi!
The color section is inside the body tag so you can’t do that. This may work:
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) { body * { display: none !important;} #colorsection { display: block !important; } }Don’t forget to change “#colorsection” to the actual color section selector or id. Note that this will hide all sections including the header, footer, etc.
Regards,
IsmaelHi Ismael! It looks like this code hides the color section as well. Is there some way to make #colorsection { display: block !important; } of higher importance than the body * { display: none !important;} ?
Hi!
Just like media queries for tablets and desktops we can target landscape and portrait mode in css.
1. Create 2 color sections on a page with 100% height and different background colors.
2. Add a custom ID to the 1st color section “#only-in-portrait” and some sample text like “Please Rotate Your Device”
3. Paste the below css in Quick CSS
#only-in-portrait { display:none; } /*Only in Portrait */ @media only screen and (orientation: portrait) { #only-in-portrait { display:block!important; pointer-events:none; } body{ overflow: hidden; } }Like Ismale mentioned above you can combine this with device screen width to specify only in tablet portrait mode or mobile portrait mode.
You can add the rest of the page content below the 1st color section.Best regards,
VinayHi Vinay,
The code that you provided makes it so that you can see the #colorsection only in ipad portrait, but you can also see the body and header as well. In order to hide the rest of the page i’d need to create a separate media query to display none in ipad portrait, and that would be a pain to add that class to each element on every single page of my site.
I would like to use the code that Ismael provided above but the only problem with it is that it does not display the #colorsection due to the following line that hides the rest of the site: body * { display: none !important;}
If there is a way that I can have this line: #colorsection { display: block !important; } take priority over the one above so that it shows on ipad portrait that would be ideal. If this is not possible then that’s okay, i’ll find a workaround. Hopefully this makes sense. Thanks!
- You must be logged in to reply to this topic.