Results Summary Component using CSS Flexbox | Resposive
Design comparison
Solution retrospective
I would like to know what's your preferred way of making your webpage compatible in small-screen devices. I usually change the layout using Flexbox, and then adjust the margins, paddings and font-size ('rem' and 'pixels') in the media query. I have noticed people use the '%' unit, which I find a bit confusing, but what is your approach?
Community feedback
- @BatestickroPosted over 1 year ago
Hi! Great solution to the challenge, and really good hover effect on the continue button!
About the responsiveness to small-screen devices, I have learned that is good idea to reduce the overall font-size directly on the html element and since I am using rems as unit that will reduce the different sizes on the different elements like paddings and margins and wherever I have rems, so if I have for example 2 rems in a margin will be equal to 32px but in a media query that reduce font-zise to a 70% on the html that 2rems will be 22.4px
//the default font-size is 16px, that is equivalent to 100% //if we want to reduce it to 70% will be 11.2px html { @media only screen and (max-width: 800px) html { font-size: 70%; } } .container { margin: 2rem; } //the 2 rems will be 32px // when the mediaquery takes effect the margin will reduce its size to 22.4px following the global font-size.
after that I use flexbox or grid to change the layout, I always think about which one will be more efficient and generate less code, because less code is eaier to read and easier to mantain.
As a relative unit the '%' unit is used to define sizes relative to a parent element, can be used along viewport, em or rem units or other relative units, I usually prefer to use rems but sometimes if I a have a div with a difined widht or height or both, '%' can be useful to define it's child element's sizes and those ones will adapt if the parent element change it's size.
.container { height: 15rem; } .container img { width: 50% } //The img inside the container will have a width of 7.5rem.
using relatives units when you need to write media queries will be easier since all elements are now adapting a bit to the changes on the screen.
Happy coding :)
0
Please log in to post a comment
Log in with GitHubJoin 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