yAshr• 60
@Exquisite10
Submitted
Kindly please help me to improve my logic and tell me the creative ways to write the CSS so that I can improve myself and my way of coding. Your feedback is really helpful and game changing. Thank you.
maym42
@maym42
All comments
- maym42• 370
@maym42
Posted
you can do this change...
body { background-color: hsl(235, 18%, 26%); /*flex*/ display: flex; justify-content: center; align-items: center; /*size*/ height: 100vh; } .container { /* min-width: 46%; need to Delete!*/ /* max-width: 768px; need to Delete!*/ /* height: 61vh; need to Delete!*/ background-color: white; border-radius: 20px; /* position: relative; need to Delete!*/ /* top: 20vh; need to Delete!*/ /* left: 60vh; need to Delete!*/ /*flex*/ display: flex; justify-content: space-around; align-items: center; /*space*/ padding: 1em; }0 - payalpagaria• 70
@payalpagaria
Submitted
css part was difficult the positioning was confusing
maym42• 370@maym42
Posted
You did a good job!😊😊😊
But in order to make the right position (center the card in the screen), You have to use css grid (display:flex in the body) and not with position: absolute like you did in the container class. So your css should look like this:
body { background-color: hsl(212, 45%, 89%); text-align: center; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: 'Outfit', sans-serif; }.container { width: min-content; border-radius: 10px; background-color: hsl(0, 0%, 100%); padding: 1em; }.p1 { font-size: 1.5em; font-weight: 700; }Hope I helped 😅
Marked as helpful
1 - Yuri Cipriano Cruz• 150
@yuuricrz
Submitted
This was my first challenge made without any type of help, was just me and me. Im starting studying html and css. Please, comment what points i can better, points what i can change, things like this.. Sorry about my english, its a new thing for me too.
maym42• 370@maym42
Posted
Hi Yuri,
You did a good gob 🙂
But I have some tips for you:
In order to center the card in the screen. add to the body this css code.
body{ background-color: var(--cor2); display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; font-size: 15px; }
And remove the margin ,height and the width form .prin{} so class .prin look like this:
.prin { background-color: white; background-repeat: no-repeat; text-align: center; border-radius: 25px; }
In addition it a good practice to use em units instead of px. In the body you have to define one time text-size in px ,and after that all the other things you defined with relative units like em.
Hope I helped 😅
Marked as helpful
0 - Lucas Tran• 20
@Lucas760
Submitted
I cannot find the solution for the text to become responsive yet. What else should I learn to do that? I try to use "vw" unit for text but it turn out different than what I think it should act. Do you think my class="description" in css is a good practice? I feel something off but I dont know where?
maym42• 370@maym42
Posted
When I want to make the text responsive, I define the text in the body with "px" units ,according to the size written in the style guide file. And in all other places(class ,elements...) I define the text size in "em" units (Relative to the font-size of the element, so 1em = current font you define in px in the body).
for example:
- for regular text define 1em
- for big text like title define 1.5 em
- for small text define 0.75 em
When you use @media for mobile screen just change the font size of the body to smaller size in "px" and as a result all other elements with "em" units will effects form that automatically.
hope I helped you 😄
Marked as helpful
0 - Ildikó Balogh• 80
@liana5555
Submitted
I am not really sure abou the colour of the picture. I put opacity: 0.5 first on the picture so it became darker becasue of the card color which was dark blue and then I added an overlay with a div and I made the background color of that div to the soft violet color which was in the style guide. But I feel like the color is still not right. When I only put opacity on the overlay it was too light. But in my opinion it is still not dark enough. I am actually curious how everyone else did it.
maym42• 370@maym42
Posted
background-image: url("../images/image-header-mobile.jpg");
background-color: var(--Soft_violet); background-blend-mode: multiply;Marked as helpful
1 - Abdullah 223• 10
@abaduy123
Submitted
hello everyone this is my first project please give me advices on how to make my html and css code looks better
maym42• 370@maym42
Posted
/center the maindiv/
body{ /---Add this---/ display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh;
/delete this/ font-family: 'Big Shoulders Display', cursive; }
/The correct font for the title/
h2{ /---Add this----/ font-family: 'Big Shoulders Display', cursive; }
0
