Landscape options for iPad

Design help General
1

So after some research I have found that the desktop view is the same as the landscape view on the iPad. I created my desktop version on the larger side to better show my illustrations. So in the landscape mode on my iPad all is good until I bring up a custom lightbox that I created and then the Modal pushes off the screen .

Is there any custom code I can add that contain the pop up modal within the landscape view of the iPad?

I hope I was clear. This is is the published site URL

http://eric-mueller-illustration.webflow.io/

Thanks in advance

Here is my public share link: LINK
(how to access public share link)

2

Hi @remix,

You experiencing this issues because you set some of the elements width in pixels.

I would suggest changing:

  • Eric_Nav - from width: 1259px to width: 77%
  • grid container - from width: 1300px to width: 70%
  • modal - from width: 1300px to width: 70%
  • image - from width: 1300px to width: 100%

With these settings all elements sizes will depend on device/browser screen and you will not have this problem with iPad landscape

Regards,
Anna

1 Like
3

Do I change these in the desktop layout? If I do then everything gets smaller but I may have to do that because I am experiencing some other issues on another laptop. I work on large monitors…

4

Hey @remix, you always can increase % size for make it look as big as you wish. And it still will give you good look on any screen size.

Hope it make sense.

Cheers,
Anna

5

Hi Sabanna,

Hey are you able to take a peek at my site again? Now it seems after resetting sizes all of my content scales up with the size of the browser window? Before the content stayed all one size.

Not sure what I did…sigh.

Thank you so much in advance

6

Right, it is how % suppose to work. I thought it is what you need :confused:

One of the ways to make it smaller, but still keep it scale down if browser window will get smaller is set “max-width” of elements that you set in %.

For example, you have “list-wrapper” width: 96%. You will also set max-width: 1300px.
So List-wrapper will be the same size as long as 96% of the page will be more or equal 1300 px. And will go “squeeze” when the page will become smaller.

Hope it make sense.

Cheers,
Anna

7

ok…that makes sense. I probably was not clear when I asked for help. So I can set the max width pixels
and then it does not grow beyond that size. Looks like that works great.

Thank you, thank you, thank you!

1 Like
8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.