One problem faced - aligning div in center of its parent div
Rajaul Islam Ratul
@ratul0407All comments
- @ShivayshivaSubmitted 11 months ago@ratul0407Posted 11 months ago
@Shivayshiva congrats on completing this challenge🎉🎉
To center the card just do this,
body { min-height: 100vh; margin: 0; display: grid; } .main { /* max-width: 1440px; */ /* height: 120vh; */ background-color: hsl(47, 88%, 63%); display: flex; flex-direction: column; justify-content: center; align-items: center; }
There is a default margin of 8px around the body that is causing the white spaces all around the corners. That's why you need to set
margin: 0
. And to make the solution properly work you need to comment out the height and width property from yourmain
.I hope you found this helpful👍👍
Have a nice day and happy coding🙂
0 - @Djole-zrSubmitted 11 months ago
I having trouble making transition on opening and closing questions, can someone help me with that?
@ratul0407Posted 11 months ago@Djole-zr congrats on completing this challenge🎉🎉
There are quite a few ways to add transition on accordions. e.g.
- You can use plain css to animate accordions first, create a new animation using
@keyframes
@keyframes fade-in { from { opacity: 0; } to { opacity: 100; } }
Before you add the transition you should use a class add it on your
p
tag which doesn't have any class by default. It get's a.show
tag when.question
is clicked. We need to change it!. Add the following classes to it (answer, hidden)..answer { opacity: 0; animation: fade-in 200ms ease 0ms 1 alternate forwards; } .hidden { display: hidden; }
Then in js just toggle between
hidden
class whenever thequestion
div is clicked- Another way is to use
max-height
as height is not an animatable property. W3schools have a very good tutorial on it you can check it out here How to create an animatable accordion
I hope you found this helpful👍👍
Have a nice day and happy coding my friend😄
1 - You can use plain css to animate accordions first, create a new animation using
- @ValperDevSubmitted 11 months ago
Hello guys, i just finished this project and all feedback is welcome from html structure to class naming, loading fonts, best practices in html / css, etc... Thank you.
@ratul0407Posted 11 months ago@ValperGT congratulations on completing this challenge🎉🎉
Your solution looks pretty decent but you need some code improvements:
- Every page should have a
main
tag. So Wrap you entire.card-container
inside of amain
tag. - You've used pixels, rems and ems on your site. But using px on paddings doesn't seem a good idea to me. And if you want to decide between rems , ems, and pixels here's an article deep diving into it. should you use px vs rem vs em
I hope you found this helpful👍👍
Have a nice day and happy coding🙂
Marked as helpful2 - Every page should have a
- @Surya-ThiruvengadamSubmitted 11 months ago
This is my first webpage with layouts in CSS All feedbacks are welcome
@ratul0407Posted 11 months ago@Surya-Thiruvengadam congratulations on completing this challenge🎉🎉
Your solution looks pretty good. But there are room for some changes.
- Always try to use relative css units instead of absolute ones. Pixel(px) is an absolute css unit. And I'd recommend you to avoid this unit completely. Using Pixel for font-sizes is a really bad idea. And I'd suggest not use it for width, height ,margin and padding also. Use rems or ems instead of pixel. If you use pixel in the future while doing large pages with complex section it'll cause a lot of problems and it is also not good for the responsiveness of the page. And if you are wondering why does it matter so much here's an article to explain you more on this topic Why font-sizes should never be in Pixels😄
That was the only nick pick that I found while viewing your solution🙂. Apart from that your solution looks decent
I hope you found this helpful👍👍
Keep up the good work and have a very nice day😄
Marked as helpful0 - @lalitkarthikSubmitted 11 months ago
I recently delved into Scss for the first time, and I must say, it's truly impressive. I have used Scss in this project and also got some cool tips and tricks. Please do take a look at the code, and suggest any improvements or changes and best practices. Give some tips on how to improve the responsiveness of the website.
@ratul0407Posted 11 months ago@lalitkarthik congrats on completing this challenge 🎉🎉
You're solution is amazing. But you should consider changing some of your code. You've used pixels for margins which is not good and using pixel for font sizes is the last thing you want to do. You should always try to avoid pixels as they are absolute units always use relative units like (rems or ems). If you are wondering what is so bad about using pixels here are some articles deep diving into this topic
Apart from this your solution looks great✨
I hope you found this helpful👍👍
Keep up the good work and have a very nice day😄😄
Marked as helpful1 - @eosookSubmitted 11 months ago
When playing around with the screen widths, I find a lot of the times a lot of my elements will have their content bleed over their box, like text going over their given height, when the screen is at certain widths.
How do you generally approach a problem like this? Do I need to make multiple media queries so that it looks better when it hits those dimensions or are the units i'm using for those elements not optimal.
@ratul0407Posted 11 months ago@eosook congrats on completing this challenge🎉🎉
You're solution looks pretty good👍. Generally when I find myself into the issue you've described. I'll never go to media queries for the solution of such a problem. Most likely I'll use
max-width
if the content is overflowing orclamp
if thefont-size
of the property is causing issues. Most of the time I find myself using max-width so the content doesn't bleed or overflow. I exactly don't know what element caused you the issue. But looking at your solution I'm guessing that the image might caused you some problem. 'Cause you haven't setmax-width: 100%
on to your image. Always reset your images using these properties,img, svg, canvas { max-width: 100%; display: block; }
I hope you found this helpful👍👍
Keep up the good work and have a very nice day😄
Marked as helpful0 - @frankgomezdevSubmitted 11 months ago
Looking for any feedback and best practices on semantic HTML, CSS used, and a11y.
@ratul0407Posted 11 months ago@frankgomezdev congrats on completing this challenge🎉🎉
You've done a really great job. There's not a lot to complain about👍. But,
- the padding you've set to
.container
of2rem
is actually shrinking your container. You can just remove it and it looks more like the design. - It's such a small challenge and there wasn't a lot of space to add landmarks but you've done enough. The footer you've added is good but you've commented out the
.attribute
😅. I know this mistake 'cause I've also done a couple of times. Uncomment it and remove the.attribute
div as you are using afooter
- And the last nick pick that I can say, and it's completely my personal opinion that there are too many
div
element on the page. You can consider making thetop box
aarticle
.
I hope you found this helpful👍👍
Happy coding and have a very nice day😄
Marked as helpful0 - the padding you've set to
- @0xmaxx1Submitted 11 months ago
Waiting for your comments ):
@ratul0407Posted 11 months ago@0xmaxx1 congrats on completing this challenge 🎉🎉
You've done a great job. But you might consider changing some code :)
- Always use rems instead of pixels. Pixels are absolute units and rems are relative units. And this relative rem units are way better than pixels in terms of responsiveness. And if you want to learn more about this topic here's an article deep diving into it Stop using pixels unit in css
I hope you found this helpful👍👍
Keep up the good work and have a very nice day😄
0 - @khalid225Submitted 11 months ago
Adding the plus and minus svg was difficult until i saw a site that converts svg to URL
@ratul0407Posted 11 months ago@khalid225 congrats on completing this solution🎉🎉
You've tried really well. But you can make it better.
- the body element get's some default styling which is implemented differently by different browsers. You should always get rid of them first and then start your own styling. And for that you can use some css resets. Because of those default styling of the
body
thecontainer-body
has shrunk a little bit and to fix that just do this
body { margin: 0; padding: 0; }
- Also remove
.accordion-body { width: 80%}
andimg { width: 100% /* by default it's always 100%*/}
. And on the accordion remove the width of 50% and apply this.
/* for mobile screens */ .accordion { max-width: 45rem; margin: 1rem; } /* for desktop */ @media(min-width: 45em) { .accordion { margin: auto; } }
- I'd recommend you to use rems instead of pixels. And if you want to know why Here's an article deep diving into this topic. Stop Using Pixels!
I hope you found this helpful👍👍
Keep up the good work and have a very nice day🙂😄
Marked as helpful0 - the body element get's some default styling which is implemented differently by different browsers. You should always get rid of them first and then start your own styling. And for that you can use some css resets. Because of those default styling of the
- @nmrtsnhSubmitted 11 months ago
Hello everyone,
I am Namrata and this is my solution for the Newsletter sign-up form with success message challenge.
If you have any suggestions to improve my code, please feel free to share!
Thank you 🙏
@ratul0407Posted 11 months agoNamaste Namrata congratulations on completing this challenge🎉🎉
Your solution looks pretty good. But you can improve your code a little bit
body { display: grid; place-content: center; min-height: 100vh; }
This will center your newsletter perfectly and then you can remove
.sign-up-form, thank-you-form { /* width: 100%; by default it will get a width of 100% so you don't need it */ /* margin: 6rem auto 0; We've centered the body so you don't need to use margins anymore🙂*/ }
And I'd also recommend to use the
form
tag instead of a.form
div this will give you some additional keyboard functionality and will help with the pages accessibility.I hope you found this helpful👍
Keep up the good work and have a very nice day🙂😄
Marked as helpful0 - @JGabriel19Submitted 11 months ago
All comments are welcome, thank you.
@ratul0407Posted 11 months ago@JGabriel19 Your solution is really great🎉🎉
There is not a lot to complain about. But you should remove
.attribute
div that you commented out. And also I would recommend you to start using pixels more. Of course you've used pixels for font size but, padding, border-radiuses and also in a lot of other stuff you should use rems or any relative unit. Relative units are always a better option over absolute units for various reasons.I hope you found this helpful👍
Keep up the good work and have a very nice day😄
1 - @OvickySubmitted 11 months ago
when i reduce the screen size it doesn't stay centered
@ratul0407Posted 11 months ago@Ovicky congrats on completing this challenge🎉🎉
You've done a really great job👍. And on to your question, It doesn't stays centered because you've set
width
andheight
on you.first-grid
remove it and it solves the problem a little bit. A little bit cause you also need to change your code morebody { min-height: 100vh; display: grid; place-content: center; }
Remove everything from your
.first-grid
they are of no use to you. And also remove all the properties from.grid-all
as well except thewidth
and I'd recommend you to usemax-width
instead ofwidth
..first-grid { border-radius: 1rem; padding: 0.5rem; background-color: white;
And now your solution is a little bit better.
I hope you found this helpful👍👍
Have a very nice day and happy coding my friend😄
0