Ipad Horizontal View

Site URL: http://www.ashleyizsak.com

I've added CSS to my site to display the homepage in a half and half view on desktop. I've kept it from displaying on the IPAD in vertical view but it's still showing in horizontal view and resulting in a bunch of ridiculously small thumbnails displaying. I would love a solution using CSS to make sure my styling for desktop does not display on the IPAD in either horizontal or vertical.

Hi  , You can use this code which will only Target the IPAD

/* ----------- iPad Pro ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

	/*PASTE YOUR CSS CODE HERE*/ 
}

/* Portrait */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

    /*PASTE YOUR CSS CODE HERE*/ 
}

/* Landscape */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5) {


    /*PASTE YOUR CSS CODE HERE*/ 

}

Also please share your code so I can assist you better.

Hi @humxahafeex, I tried using this code but it affected the desktop version as well. Maybe I need to increase my page width in style settings so that this code doesn't affect it?

Here is what the code looked like:  #collection-5e4863867a7f2c7e5e21c29f {
    height: 100%;
    background: linear-gradient(90deg, #ede9e6 50%, #ffffff 50%)
  }

I want this to display only on desktop.

Thanks again for your time and help!

On 3/15/2020 at 2:33 PM, humxahafeex said:

Hi  , You can use this code which will only Target the IPAD

/* ----------- iPad Pro ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

	/*PASTE YOUR CSS CODE HERE*/ 
}

/* Portrait */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

    /*PASTE YOUR CSS CODE HERE*/ 
}

/* Landscape */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5) {


    /*PASTE YOUR CSS CODE HERE*/ 

}

 

Also please share your code so I can assist you better.

 

Okay I still haven't been able to figure this out. The wells template seems to display the homepage using thumbnail views in IPAD but on Desktop that isn't the case. I am now thinking I need to somehow override the landscape display in IPAD to display in portrait mode or to just target those thumbnails. Any suggestions would be appreciated.