Streaming live at 10am (PST)

Breakpoint optimization on different screen sizes

Hey guys,

I’m working on our product pages and stumped as to why I’m having this problem
I’ll attach images and a view link but basically, on my iMac desktop (21") all breakpoints look great and optimized how they should be. However, when switching to a smaller view such as my Macbook Pro (13"), everything looks jumbled together even though they are the same exact breakpoints with the same pixel size.

The first two images are screenshots from my iMac and the second are from my laptop.

I’d appreciate any help. Thanks a lot in advance!

Another problem I’m having, which could be related is that on my Macbook, the product image displays higher than the text on the right, but vise-versa on my larger screen (iMac screen). So my question would be how do I make it equal height regardless of desktop screen size so it remains consistent across the board?

Site Link: https://preview.webflow.com/preview/project-x-656339?utm_medium=preview_link&utm_source=designer&utm_content=project-x-656339&preview=ba896378bc174c2f844e58042e722287&pageId=5de624494a5986678762c64e&itemId=5de86c3fa529ab68c8c87da4&mode=preview

My guess without Looking at your project is that you are using fixed sizes on your objects, try use %

You should consider adding some specific media queries - that may be helpful - you can have additional layouts that work for your needs…

Thank’s for your response. I tried playing around with % based sizing but it just skewed the rest of the elements. Unless I’m doing something wrong when it comes to setting % sized elements.

If you want your layout to work on all breakpoints the % layout is the best. You need to build from full page and down to smaller sizes. However for each breakpoint you might to do visual corrections.

I have not looked at your preview link since I’m on a iPad for the moment but it looks like some parts are done at fixed size and are not scaling when the picture gets smaller

1 Like

Thanks, Janne. I wasn’t having problems with the actual breakpoints themselves, rather the display on a different screen size on the same breakpoint but regardless you were right, setting a fixed % solved the problem. For some reason certain elements I had set as fixed % and the others a set size.

Thanks a lot, I appreciate it!

1 Like