[finger123Participant]

HI

When i view my site under mobile “ipad 9.7 screen” there is a large white space on bottom. This happens in portrait and landscape view. Is there something i can do to resolve the white space on the bottom of the screen under this view setting?

[finger123Participant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Thank you for writing in! You can add this under Custom > CSS in the Customizer.

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
  	.home .x-section .x-img,
  	.home .x-section a.x-img img {
  		height: 45vh;
  	}
}

Hope it helps, Cheers!

[finger123Participant]

HI
It helps, but doesnt look right. Is there a way to make the view in a mobile format where my images are stacked on top of each under the ipad resolution? When in landscape, its okay but portrait, it doesnt look right.

[finger123Participant]

The code does help the white space however most pages are jumbled together and images are off. Is there a way i can force under ipad view portrait and landscape to display the mobile view so that the images are stacked on top of each other appropriately and images look normal?

[ChristianModerator]

That would require additional custom media queries. Regretfully, further customizations from here would fall outside the scope of our support. You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/.

Thanks.

[finger123Participant]

so is there a way to make the ipad view look like the attached picture? this is a view of my site with the screen scaled down. I mean the theme scales down as needed however it seems that it is using the wrong view at a certain resolution only. if it displayed this, then it would be perfect.

[RadModerator]

Hi there,

The gap appearing on iPad is because of content isn’t tall enough to fill the height of iPad screen. It’s okay on your screenshot since the content height is equal to your screenshot’s height.

Add taller images and it will work, you can have multiple sections and utilize HIDE BASED ON SCREEN WIDTH option. Hide the section from the desktop where taller images are, then hide the section from mobile where shorter images are.

It’s not using the wrong view, calculate your total section’s height and compare it to iPad screen resolution. Images changes width, so is the height. If the image’s width became larger, then height too, if the image’s width became smaller then the height too. You can’t force your image’s height to fill the iPad height because it will stretch like the attached screenshot

Thanks!

[Author]

Posts