Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Results Summary Component using CSS Flexbox | Resposive

frankuxur 170

@frankuxur

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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

Vincent 70

@Batestickro

Posted

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 GitHub
Discord logo

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