@eddybpro
Posted
Hi, moritzrose
Congratulation on finishing this challenge, I hope it was fun.
For the code, You did a nice job but still need some improvements mostly in CSS:
- CSS code:
@media only screen and (max-width: 375px){
.container {
/*remove ''margin-left'' and ''margin right'' properties*/
}
.container div{
/*change the "padding" values to (25px=1.56rem)*/
/*add "padding-bottom" property*/
padding-bottom:1.56rem;
/*remove the "height" and "position" properties*/
}
button{
/*remove the "position" property*/
}
}
@media only screen and (min-width: 376px) and (max-width: 1440px){
.container {
/* remove the "height" property */
/* remove this : align-content: center; */
/*add this */
justify-content: center;
}
.container div{
/*update this*/
padding:1.56rem;
}
button{
/*remove "position" property*/
}
}
Tips
-
Remember in most cases you don't have to use the
heightproperty in containers likedivormain..., instead you can usemin-height, Which makes your site displays well in small screen sizes. -
Use relative units
rem eminstead of absolute unitspx. -
Make use of
HTMLsemantic tags:header,main,footer. -
I recommend you start using classes and, or pseudo-elements: example:
-
- In the
buttonyou can use a class like that:<button class="btn"><button>
- In the
-
- Here is how to use pseudo-element:
.container > div{}
Using classes and pseudo-elements makes your styles display faster.
That's it HAPPY CODING
@moritzrose
Posted
Awesome feedback!! @eddybpro
@moritzrose
Posted
The position: absolute for the button was to have it displayed at the bottom of the container. I experimented and the only way for me to get it there was to use position absolut. How else? Cause now it just sits right under the p element. Removing the height, makes the container just as high as it needs to be to fit in all the elements, but I want it stretched out a bit more. How would you do that? And when I say stretched out, I mean certain distances/gaps where I want them to be, not just stretched out in general. The rest of the feedback is absolutely fantastic :) I changed everything. @eddybpro
@eddybpro
Posted
Hello, @moritzrose
Happy to hear that from you.
For the question,Sorry I did not answer earlier, If I get it right you can use the margin property like that:
button{
margin-top: your value;
margin-right: your value;
margin-bottom: your value;
margin-left: your value;
/*here a shorthand */
margin: your values;
}
GOOD LUCK
