How do you manage elements on the edge of the screen / out of the grid as screen scale up
I’m curious about how you handle situations where a designer places elements on the design mockup right on the edge of the screen / out of the grid. This positioning might work well a specific screen size, or on smaller screens, but as the screen size increases, it can lead to awkward or unintended placements.
For instance, putting a max-width helps control the layout, but it doesn’t always align perfectly with the design intentions... I’m interested in hearing how you approach this—do you have any go-to strategies or techniques for keeping elements well-positioned as screens grow?
let me show you some exemple of what i mean with the images :
4 Replies
I would position the coffee splash image absolute to one of the section or just use ::before or ::after for the same purpose. As for the coffee elements on the body, the designer has to know that at some point that these will not be visible on smaller screens since the container will be 100% width. Unless you wanna keep container smaller than the body itself through all screens, but that is not advisable. Designer must provide mobile design also, and if it sucks (often it does since they don't know much about the layout of the html), collaborate with him/her that some things are just not meant for smaller screens.
For eg. the section that says Discover the best coffe, I would add a padding bottom, and then placed the image there, so it doesn't overlap with the rest of the content.
Thanks for your take ! So for exemple if the content has a max-width of 1280px . And the screen in 2000px with. Would you keep the splash on the edge of the screen or edge of the max-width, near the content ?
But then you need to Ask for the full picture otherwise it will be cuted weirdly.
@Kevin would love to see your vision on this 🥹🤞
In the design the splash sits on the edge of the content, not the edge of the screen, so I would keep it that way as long as possible. Would adjust the size of the image tho when necessary.
Please don't @ people to get them to answer your questions as per #📝rules number 5