Design comparison
Solution retrospective
The layouts in figma had the size of 1440x800 (desktop version) and 375x800 in the mobile version. I made the page based on these sizes, but the result on screens between these two sizes was not so good, with several parts breaking all over the page, I couldn't make the elements fluid enough to avoid this.
The background image took a lot of work, small changes in the screen size already made it break, even using the background-size property.
A "solution" I did was to put an intermediate breakpoint to solve this problem a little.
Some feedback would be great to make my layout more fluid between breakpoints.
Community feedback
- @grace-snowPosted almost 2 years ago
Hi
I hope this helps
- remove the width and height attributes from picture source and img. Even if you did need to include them, the purpose is ensuring the aspect ratio is correct and you would not include units in their values
- remove explicit width from the button. Just use padding
- you must remove the overflow hidden from page! This completely breaks the solution on mobile landscape
- 460px is too small to switch to the large screen layout. You should only change the layout when there is room to do so
- Also media query values should be in a responsive unit like rem
- you should only need one media query on this
- either use flex values (grow shrink basis) or max-width if using flex for the two halves of the layout on larger screens; OR us css grid
- keep gaps small. Don't try to create the whole layout with huge margins
I'm looking through code on a phone so it's hard to advise further tbh
Marked as helpful0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord