![]() Mobile dimensions can get as large as 514px wide, so if you’re using breakpoints, we recommend setting your mobile breakpoint max-width to 515px. Since some devices have a viewport as small 375px pixels wide, you can turn on responsive design and set your max pixels to the dimensions of your lightbox. Here is a preview of a 300×400 mobile lightbox design: This will fit on every mobile device without cutting off. Here is an example of a 375×250 sidebar with the position Bottom Left, viewed in a 1024×768 window:Įvery mobile device is a little different, but 375×660 or smaller is a good size for mobile lightboxes. If you want to add more details or images and make a slightly larger sidebar, we recommend using a Bottom position. Here is an example of a 340×200 sidebar with the position Center Left, viewed in a 1024×768 window: ![]() They appear relatively high on the page, so they grab attention without covering your content. Smaller sidebar designs look good with the position set to Center Left or Center Right. Experiment with sizes and layouts that look good on your website. We recommend starting with a sidebar between 300×200 or 375×250. Sidebar widgets appear next to your content, so generally, these should be slightly smaller than a lightbox. Here is an example of a 900×650 lightbox with the max width and height set to 75%, viewed in a 1024×768 window: To learn more about responsive settings, see our help doc here. This automatically resizes your lightbox based on the size of the window. To guarantee that your pop-up fits any window, you can turn on responsive design. There’s no way to predict every screen resolution or whether your visitors will view your website in a full-screen window. Here’s a preview of a 900×650 lightbox on a 1024×768 window: For a full-screen design, you may choose to go larger and use responsive design. To account for the address bar, bookmarks bar, and taskbar, etc., staying under 650 pixels for the height of your pop-up is probably your best bet. So 768 seems like a good number to stay under for height. To design something that looks good at most resolutions, it’s a good idea to stay under 900×650.ġ366×768 is a common screen resolution, and some people still even use 1024×768. Here’s a preview of a 500×400 lightbox on a 1366×768 window: Lightbox design varies, but for a pop-up centered on your website, a lightbox around 500×400 looks pretty good. ![]() Choose any dimensions, then turn on responsive design, and your lightbox pop-ups will automatically resize to fit any window. Desktop Lightbox Sizesĭigioh makes designing a lightbox for desktop users easy with our responsive design settings. If you have Responsive settings turned on, these numbers matter a little bit less, but if you’re using Edge to Edge or Scrolling, they matter a lot.īelow, we share some more detailed size guidelines. (Mobile breakpoint max width should equal the width of the Main breakpoint) (with breakpoints for smaller screen sizes) Desktop Inline: 1000px wide, any height.Sidebar Pop-Up (Desktop or Mobile): 340×200.(Recommended max width: 375px, with a 515px breakpoint) But as a starting point for a basic lightbox, pop-up, sidebar, or inline form, we recommend these dimensions: There’s no exact “right” size for Lightbox design. Whether you want a subtle sidebar or a full-screen takeover, you can design that with Digioh’s form builder.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |