@Batestickro
@LucianoOliveira1
Submitted
EN: Feel free to leave any feedback about the solution or the code! Thank you very much in advance!
PT: Sinta-se à vontade para deixar qualquer feedback sobre a solução ou sobre o código! Desde já, muito obrigado!
@Batestickro
Posted
Hello Luciano! Excellent job coding this design.
Looking at your code I just notice that you are repeating code in the media queries, for summary and your-result classes, and it is not necessary, mediaqueries allow you to keep your current styles and you can just overwrite or add the ones that you need.
.summary{
display: flex;
align-items: center;
flex-direction: column;
box-shadow: 11px 16px 20px -12px #00000026;
border-radius: 15px;
@media (min-width: 768px)
main .summary {
display: flex;
align-items: center;
flex-direction: column;
box-shadow: 11px 16px 20px -12px #00000026;
border-radius: 15px;
margin: unset;
padding: 0 10px;
width: 300px;
}
//you can just in the mediaquerie add the styles you need
@media (min-width: 768px) main .summary {
margin: unset;
padding: 0 10px;
width: 300px;
}
Also In the main element you added a flex-direction: row, you can skip this step since row is the default value for flex-direction, you can just set display=flex and it will be automatically be set it to row.
main{
display: flex;
/* flex-direction: row; */ this one can be skiped since is the default.
width: 600px;
margin: unset;
padding: 10px;
All of this is in order to reduce code, because less code is easier to read and maintain overtime.
I hope you can find this useful and happy learning :)
Marked as helpful
@frankuxur
Submitted
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?
@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 :)
@dzhkaeffi
Submitted
@Batestickro
Posted
Hi! Really good dessing, after look at your code just notice that you are using display: flex, and then flex-direction: row, and is not necessary since row is the default value, so you can just use display:flex without specify the flex-direction if you need to display as row.
display: flex;
flex-direction: row;
is the same as:
display:flex
congratulation on completing the code, happy coding :)
Marked as helpful