@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 :)