@KylesTech95
Posted
Hi KT,
Great job on this project! I truly appreciate the use of flexbox for creating the preview card. Although your CSS look sharp, there is always room for improvement.
Issues:
- I noticed that you included a media screen at the bottom of your styles sheet. I tweaked the width just to get the width of each element to line up as close as the design:
@media screen and (min-width:1140px) {
.card{
/*width: 375px;*/
/*reducing the width will alow each element to line up just like how its places in the design*/
width: 250px;
}
}
- The [body] selector has been modified to adjust the image to the center, as well as included the font & text-align properties. Doing this will reduce the amount of lines used for each element.
body{
min-height: 100vh;
background-color:hsl(212, 45%, 89%);
/* width: 100vw;*/
display: flex;
/*addeed flex direction column*/
flex-direction: column;
justify-content: center;
align-items: center;
/*margin: 50px*/
/*font-fproperties & text-align can be added to reduce the line space*/
font-family: 'Outfit', sans-serif;
font-size: 15px;
text-align: center;
}
- Selectors not selected
/* text & p did not have the class "." in front of it.*/
.img, .text, .p {
width: max-content;
/*Not necessary because the content will adjust to the width of its parent [.card]*/
text-align: center;}
/*in addition, you can eliminate these class selectors and paste the text-align property in the [body] selector*/
- The paragraph text has been modified for text visibility as well as eliminating properties. In addition, the :root selector would be an effective tool to use to quickly change colors, fonts and sizes from the selector itself verses each individual element.
.p {
/*color: hsl(212, 45%, 89%);*/
/*Paragraph Color that can easily be seen*/
color: hsl(220, 15%, 55%);
/* font-size: 15px;*/
padding-top: 1em;
/*font-family: 'Outfit', sans-serif;*/
}
Root Example:
:root {
--bg-color: hsl(1, 1%, 100%);
--bg-color2: hsl(212, 45%, 89%);
--background-color3: hsl(218, 44%, 22%);
--paragraph-color: hsl(220, 15%, 55%);
--font-family:'Outfit', sans-serif;
/*Weights 400 & 700*/
}
I hope this helps!