Landscape mode on a phone

Permalink Browser Info Environment
Is there a way to control the header when it's in landscape mode on a phone? I've added a logo that adds to the height. It's perfect in portrait mode. In landscape it eats up too much real estate. Is there a workaround? I'd be just fine hiding it in landscape. Everything I do controls the display in both portrait and landscape.

Type: Discussion
Status: New
bjalexander
View Replies: View Best Answer
jordif replied on at Permalink Best Answer Reply
jordif
Hi!

I'd recommend using media queries. For instance, you could add this CCS:

@media (max-width: 767px) and (orientation:landscape) {
   .navbar .pull-left {
      display: none;
   }
}



This should hide your logo in devices with a screen width under 768px and in landscape mode.


You could go a step further to make sure this only affects mobile devices:


@media (max-width: 767px) and (orientation:landscape) {
   .mobile .navbar .pull-left {
      display: none;
   }
}



Maybe you'll need to adjust the "767px" value to suit your needs.

Hope this helps!

Jordi
bjalexander replied on at Permalink Reply
bjalexander
Thank you! I included all the ".navbar" stuff and it works like a charm.

This has been the most wonderful theme to design with. Everything is SO clear. Really a pleasure to use.

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.