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
@maym42All comments
- @Exquisite10Submitted 11 months ago@maym42Posted 11 months ago
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 - @payalpagariaSubmitted about 2 years ago
css part was difficult the positioning was confusing
@maym42Posted about 2 years agoYou 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 helpful1 - @yuuricrzSubmitted about 2 years ago
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.
@maym42Posted about 2 years agoHi 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 helpful0 - @Lucas760Submitted about 2 years ago
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?
@maym42Posted about 2 years agoWhen 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 helpful0 - @kristishhSubmitted about 3 years ago
If you have any advice, you're welcomed to share it with me!
@maym42Posted about 3 years agoHi, I also solved this challenge. You can look at my solution and maybe it will help you :)
0 - @BrotliSubmitted about 3 years ago
I would like some tips on how to make pages to adapt with mobiles too, I welcome any comments
@maym42Posted about 3 years agoTo make a mobile-friendly design use @media in your css file.
Marked as helpful1 - @liana5555Submitted about 3 years ago
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.
@maym42Posted about 3 years agobackground-image: url("../images/image-header-mobile.jpg");
background-color: var(--Soft_violet); background-blend-mode: multiply;
Marked as helpful1 - @abaduy123Submitted about 3 years ago
hello everyone this is my first project please give me advices on how to make my html and css code looks better
@maym42Posted about 3 years ago/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