Docs

[toddfmay]

I’ve been through the forum and have not found a solution for my poor iPad portrait display issues. I tried those I found, but nothing seems to help – http://dev-palmspringslife.pantheonsite.io/

Landscape is fine – but at portrait the size > 1080 and < 750 is hideous at 748 it’s fine again.

What options do I have?

Thanks- Todd

[Nico]

Hi There,

Thanks for writing in.

You can early start the full width column earlier so that it would look great in portrait version. Try adding this in your customizer > Custom > CSS

@media (max-width: 900px)
.x-column.x-sm {
    float: none;
    width: 100%;
    margin-right: 0;
}

Increase or decrease the max-width to adjust when to change to where you want to start the full width column.

Hope it helps.

Let us know how it goes.

Thanks.

[toddfmay]

Works great -Thanks- Todd

[Prasant Rai]

You are most welcome. 🙂

[toddfmay]

Spoke too early is having no affect on ipad – collapsed correctly on browser at width setting but not on iPad!

Todd

[Joao]

Hi Try using this code instead:

@media (max-width: 900px) {
.x-column.x-sm {
    float: none;
    width: 100%;
    margin-right: 0;
} }

If that does not work, please try this code instead

@media (max-width: 900px) {
.x-recent-posts a.x-recent-post2 {
    width: 100; 
    margin-bottom: 20px;
} }

Hope that helps,

Joao

[toddfmay]

nothing above seems to affect iPad display. Todd

[Friech]

Hi There,

Use this CSS @media query instead.

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
  	.x-column.x-sm {
	    float: none;
	    width: 100%;
	    margin-right: 0;
	}
}

But before you do that, copy your whole CUSTOM CSS in CUSTOMIZER. Then go to this page http://csslint.net/ and checked your custom css there. Address all the errors (you can ignore the warnings).

You can check my CSS @media query if it works by pasting it on top of your custom css.

Hope it helps, Cheers!

[Author]

Posts