I have a little knowledge of media queries thats why im having a problem in that part where the container is not at the center eventhough i used, display: flex; justify-content: center; align-items: center; Although I wanted it to work with this code but it wont budge that
s why I tried a different solution which is margin-top.
Latest solutions
Base-Apparel-coming-soon using React + Tailwind + Accessibility
#react#tailwind-css#vite#accessibilitySubmitted 11 months agoInteractive-Rating using React + Tailwind + Accessibility
#accessibility#react#tailwind-cssSubmitted 11 months agoNft-Preview-Card using React + Tailwind + ThreeJs
#react#tailwind-css#vite#accessibilitySubmitted about 1 year agoTestimonials using React + Tailwind + Node + Gsap
#node#react#tailwind-css#vite#gsapSubmitted about 1 year agoAny feedback!!
Latest comments
- @Zeref1028What challenges did you encounter, and how did you overcome them?@manishsinghraj
Hi, Great Start!
Though I don't see any valid links for site or code. But answer for your question is use min height as 100vh (view height)
display: flex; justify-content: center; align-items: center; min-height: 100vh;
This is the usual pattern one can use to center.
- @mirodiljondev@manishsinghraj
Great work!!
Just to keep content, center of the page view - use min-height: 100vh for the body element.
display: flex; justify-content: center; align-items: center; min-height: 100vh;
Marked as helpful - @Ridwan10000What are you most proud of, and what would you do differently next time?
I am proud of using media queries. It switches design when device width crosses 450px.
What specific areas of your project would you like help with?I would like to get help in making the box shadow. I could make it while building the project
@manishsinghraj - @shalriWhat are you most proud of, and what would you do differently next time?
Creating a reusable
What challenges did you encounter, and how did you overcome them?TestimonialCard
component was interesting, since the cards have distinct values. I had to make the component customizable. I tinkered with Tailwind's grid utility classes. I realized I have to practice this more often.Tailwinds grid classes. I need to use it more to gain more familiarity. I went hard on the docs for this one.
What specific areas of your project would you like help with?I'm all good for now. Just appreciating the free challenges.
@manishsinghrajGreat work!
I've learned a thing or two from your code approach.
- @xarisVavlWhat are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
@manishsinghrajGood work!!
- @mesoma-hubWhat are you most proud of, and what would you do differently next time?
Improving on my use of flexbox for alignment and responsiveness and also working with images a lot more better.
What challenges did you encounter, and how did you overcome them?working with the image and making it span exactly half of the parent container.
What specific areas of your project would you like help with?The heights and widths of the card, the paddings and margins used also the font sizes and line-heights and letter-spacings used.
@manishsinghrajHi,
For the desktop view, you might consider limiting the width of the card by using a max-width property. :)