iPad in landscape vs portrait mode

Visual Voodoo

On my site (http://www.visualvoodoo.net) using an iPad (pro and mini) in landscape looks good with the sidebar, but in portrait mode on iPad I'm not crazy about that look as images are kind of squashed. In portrait mode I'd prefer to see the iPhone style menu button. Anyone know the CSS code would need to adjust this?

Thanks
David

Visual Voodoo

Here is a picture of how the iPad displays the site in portrait mode....note how the images are squished...

This is the view I would prefer to see...the same as the iPhone...

Visual Voodoo

Anyone know how to do this?

Visual Voodoo

Someone familiar with this, or have a similar problem?

Hikin' Mike

@Visual Voodoo said:
Here is a picture of how the iPad displays the site in portrait mode....note how the images are squished...

This is the view I would prefer to see...the same as the iPhone...

As far as I can tell when you enable your menu for mobile they use Javascript to add some CSS for mobile, like the text 'Menu'. There is no way to do that (at least I can't) like you want, BUT you can get it close. It will show your individual categories, like when you tap 'Menu', but it will look cleaner.

@media (min-width: 671px) and (max-width: 800px) {

    .sm-page-layout-region .sm-page-layout-region-left,
    .sm-page-layout-region .sm-page-layout-region-right {
        min-height: 100% !important;
        height: 100% !important;
        bottom: auto !important;
        left: auto !important;
        }

    .sm-page-layout.sm-page-layout-sitetemplate > .sm-page-layout-region-body, 
    .sm-page-layout.sm-page-layout-typetemplate > .sm-page-layout-region-body, 
    .sm-page-layout.sm-page-layout-pagetemplate > .sm-page-layout-region-body, 
    .sm-page-layout.sm-page-layout-edit > .sm-page-layout-region-body, 
    .sm-page-layout.sm-page-layout-fillheight > .sm-page-layout-region > .sm-page-layout-region-left, 
    .sm-page-layout.sm-page-layout-fillheight > .sm-page-layout-region > .sm-page-layout-region-right {
        position: static !important;
        }

    .sm-page-layout.sm-page-layout-fillheight > .sm-page-layout-region > .sm-page-layout-region-left {
        left: 0 !important;
        top: 0 !important;
        }

    .sm-page-layout .sm-page-layout-region-center {
        margin-left: 0 !important;
        margin-right: 0 !important;
        }

    .sm-page-layout .sm-page-layout-region, 
    .sm-page-layout .sm-page-layout-row, 
    .sm-page-layout .sm-page-layout-row .sm-page-layout-column {
        display: block !important;
        float: none !important;
        letter-spacing: normal !important;
        width: 100% !important;
        word-spacing: normal !important;
        }

    .sm-page-widget-16388565 .sm-page-widget-content {
        margin: 0 !important;
        padding-bottom: 20px;
        }   

}       

Visual Voodoo

Hi Mike. Thanks I will try that code to see if it works better. The will be my last resort.

It looks like the following code (http://www.aaronmphotography.com/Customizations/Navbar/Display-Different-Navbar-Based) may address what I was trying to do. I found the following code and was trying to see if that handles what I was trying to do...some errors though.

Now if I want just the iPhone menu for the iPad in portrait/vertical mode, how would I do that? I put in just the code for Large Displays and tried adjusting the min-width but I am not seeing anything happen. iPad Mini’s have a resolution of 1024x768 and iPad Pro’s have a resolution of 2048 x 1536. So I set 801 and nothing. So I tried 1900. Still nothing. What am I missing?

/* 
   = LARGE DISPLAYS   =
   For small screens and tablets in vertical orientation, 
   show a horizontal menubar in the header. 
   Hide the header for screens that are large enough */
@media only screen and (min-width: 801px) {
  .sm-page-layout-region-header { display: none; }
}

/* 
   = iPads and Small Monitors  =
@media only screen and (min-width: 641px) and (max-width: 800px) {
   /* Hide the left nav bar for screens that aren't large enough */
  .sm-page-layout-region-left { display: none; } 

   /* Move the center of the page to the left edge of the screen since the left
       navbar is no longer there */
  .sm-page-layout-region .sm-page-layout-region-center { margin-left: 0px !important; }
} 

/* 
   = Mobile Phones  =
@media only screen and (max-width: 640px) {
  /* Hide the header from Mobile Phones */
  .sm-page-layout-region-header .sm-page-widget-logo,
  .sm-page-layout-region-top .sm-page-widget-nav { display: none !important; }
}

Hikin' Mike

First off, I don't own a mobile device....no cell phone, iPad etc. I use this to see it on other devices: http://quirktools.com/screenfly

Did you try the code I posted?

If the iPad Pro is 2948 x 1536, none of that code will work because it's too big. It's bigger than my monitor.

Visual Voodoo

Hi Mike. Thanks again.

I have been working and traveling a lot lately (with and without internet) and with the holidays, I haven't had a lot of time to mess with the mobile version of the site. I really do appreciate your help with the code Mike. I just need to find some time to muck about with the website stuff but didn't want to leave you hanging with no response.

Hope you have a great Xmas!

David

Hikin' Mike

@Visual Voodoo said:
Hi Mike. Thanks again.

I have been working and traveling a lot lately (with and without internet) and with the holidays, I haven't had a lot of time to mess with the mobile version of the site. I really do appreciate your help with the code Mike. I just need to find some time to muck about with the website stuff but didn't want to leave you hanging with no response.

Hope you have a great Xmas!

David

No problem. Have a great Christmas too!

spiralx

For Retina displays you need a separate media query, this page shows you how to use them:

https://css-tricks.com/snippets/css/retina-display-media-query/

You can then differentiate between non-Retina and Retina devices as well as screen size.