I was wondering what was the best approach to styling an element. The method I usually see is to give it a class, and select it in css using the class name. Is this the normal way of doing it?
I was also wondering if there were any other things I could've done better. I would like to know if there were any practices I didn't use that are recommended.
Any other tips would be greatly appreciated.
Hello Moses! Congratulations on completing another challenge.
To style an element there is another way that is using id=" some name". And access this in CSS using #.
#idname{ your code here; }
Hope this helps!!!
Hello Chaitya! Congratulations on completing your project👏
To center the container and to make it viewable use width,min-height in body section.
body{
display:flex;
min-height:100vh;
width:100%;
For perfume part to make it capital.
.perfume{
text-transformation:uppercase;
letter-spacing:1rem;
}
And Intially set padding and margin to zero so that no padding and margin would be applied to the whole html page.After that it will be easy to adjust the both.
*{
padding:0;
margin:0;
box-sizing:border-box;
}
Once visit this website
[( https://www.w3schools.com/css/default.asp)]
**Hope this helps!**😃
This is my 4th challenge, as I'm getting more and more comfortable with HTML and CSS. I recently learned Flexbox and CSS Grid, and this is my first time incorporating them in a project.
You're welcome to tell me what I did wrong (or right) :D
Thanks a lot!
Hello Julien congratulations on completing your new project👏
You shouldn't use display,width ,height inside the html.
Instead you have to add some changes to the body.
Use
body{
display:flex;
min-height:100vh;
width:100%;
justify-content:center;
align-items:center;
}
Hope this hepls😃
which areas of the code do you think, something better should be to save me error or time next time?
Hello! Abdulmalik Congratulations on completing your new project👏
To center the QR card you have to add some changes to the body
Use
display:flex;
min-height:100vh;
width:100%;
justify-content:center;
align-items:center;
To improve the Container height use👇
max-width:340px;
height:auto;
(this make sure to adjust the height of the container as the content increases)
Hope this helps😃
Happy Coding🥳
I still don't know how to center the div vertically [UPDATED]. But anyway everything seems good and responsive. I don't get why the "up" word of the "sign up" text into the button go to a new line when we use the zoom around less 1300px.
**Hello MrFougasse Congratulations on completing your new project 👏 **
I can't see the code for this site please share the link.
And for the button to center the whole text use👇
display: flex;
text-align:center;
justify-content:center;
align-items:center;
max-width:100%;
Happy Coding🥳🥳
This project has been updated thanks to @SindhujaBandaru's advice on how to center the card with min-height: 100vh. Thanks again, @SindhujaBandaru!
Hello @codercreative Congrats on completing your project.
-For body tag in CSS instead of using margin to center the body,use this instead
body{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
min-height:100vh;
}
If you need to put some content just in the middle of the page you have to set body to min-height: 100vh; and handle the overflow if needed. Hope this helps!
Hope to see all your comments
Hello @trandainien Congrats on complete your new project.
A humble mention, you uploaded Order summary component solution to 3 column card component.
-->Use a article tag after the body tag to avoid accessibility issues.
-->Code for your "option" div to make it active use and also use anchor tag <a href=""></a>(it is used to make/add links)
.option a { margin: auto; margin-left:5rem; font-size: 0.8rem; color: var( --primary-bright-blue); font-weight: 700; }
.option a:active { cursor: pointer; color: var(--neutral-desaturated-blue); text-decoration: none; }
Happy Coding!
I would like to ask how to improved with the management of spaces, using paddings or margins?
also the use of media querys and until which point these are useful ?
also, what are the best practices to work with css, flexbox and media querys?
Hey EDDuardOo-Code!Congrats on completing your Project.It looks Great. We use margins most to improve spaces between paragraphs,sections.We use paddings to improve elements content or inside of elements to define borders.Media queries are used for different devices,tablets,laptops,desktops etc. With Media queries we can built responsive websites.You can practice css in frontendmentor itself.On time goes by you will get it . Checkout w3schools for more https://www.w3schools.com/css/css_margin.asp
My first challenge. Here it is.
Hello @MrFougasse I think you didn't uploaded the entire folder in github.Try uploading Images,design,Readme files in your github repository.Then we can see the design maybe.Its showing 404 error.
