Looking to hire developers?
@SindhujaBandaru
@Moses2308
Submitted
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.
@SindhujaBandaru
Posted
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!!!
@chaitya-titan
Submitted
@SindhujaBandaru
Posted
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!**😃
@windu80
Submitted
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!
@SindhujaBandaru
Posted
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😃
Marked as helpful
@Labere265
Submitted
which areas of the code do you think, something better should be to save me error or time next time?
@SindhujaBandaru
Posted
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🥳
Marked as helpful
@MrFougasse
Submitted
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.
@SindhujaBandaru
Posted
**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!
@SindhujaBandaru
Posted
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!
Marked as helpful
@trandainien
Submitted
Hope to see all your comments
@SindhujaBandaru
Posted
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!
Marked as helpful
@EDDuardOo-Code
Submitted
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?
@SindhujaBandaru
Posted
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
Marked as helpful
@MrFougasse
Submitted
My first challenge. Here it is.
@SindhujaBandaru
Posted
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.
Marked as helpful
