1

I am working on a problem where we need to show the users a preview of an image through a modal. We want them to have the maximum possible view within a modal and not create a separate page for that. So my question is, what should be the maximum modal size in % to the size of the screen?

Improve this question
4
  • The answer is depending on the device. A Modal may take 90% of the page in a regular phone (320px in width) while it only takes 40% on a desktop (for example)... so, percentage is not a good measure in this case.
    – Shahriar
    Sep 27, 2021 at 11:02
  • Let's not talk about phones for now, just % in terms of desktop resolutions. Suppose you have a 1280(w)x720(h) screen, what would be the MAXIMUM size for a modal that you'd suggest? Considering I want to go for the maximum possible one
    – Ahmad Khan Niazi
    Sep 27, 2021 at 12:46
  • 1
    I suggest something like Wikipedia's desktop solution for viewing images larger. Quite a satisfying and non-disruptive preview.
    – Luke Sawczak
    Sep 28, 2021 at 2:54
  • If you are stuck to a framework that forces a modal for previewing images, you should state this in the question. The better solution however is to step away from such modal and show the images as large as they are or can be in the screen and fill the remaining space with a background that covers the page. Logically it should also have a clear close button. It's indeed like wikipedia does as mentioned by Luke.
    – jazZRo
    Sep 28, 2021 at 11:34

2 Answers 2

Reset to default
2

The size of the modal shouldn’t be too large, and shouldn’t take the entire screen. Ideally, it shouldn’t take more than 20% - 25% of the screen on large windows, and 50% on tablets - these are the recommendations I always found and the values I noticed in frameworks like Carbon design system or Bootstrap use.

By restricting the size of modals, and by keeping what the user was doing previously behind a translucent background, you can keep the disruption to a minimum.

Or, you could use the guidelines for dialogs, even if it is a little different. You can check the Material design guidelines for this.

*A dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision.

Dialogs should maintain a minimum 48dp distance from the leading and trailing edges of a screen. On small screens, dialogs scale vertically until reaching 48dp from the screen’s top and bottom edge. On larger displays, dialogs can increase in size to a maximum width of 560dp. When a dialog reaches the maximum width, it expands or contracts vertically to support content, up to a maximum height of 560dp. enter image description here

Improve this answer
0

The maximum size for displaying a photo will depend on the size of the photo itself. If it is 500px width, then that should be its maximum size.

Since you are talking about PREVIEWS of photos, then any small size will do, from 150px to 500px.

Improve this answer
1
  • You didn't quite get it. Let me elaborate. You click on the thumbnail of an image/poster. Let's say, similar to Freepik or Shutterstock. You have a square boundary within which the poster would necessarily lie whether it be a square or a rectangle (portrait or landscape). Now, what should be the maximum height for the modal in ratio or % with the height of the screen?
    – Ahmad Khan Niazi
    Sep 28, 2021 at 5:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.