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.
Manish Singh
@manishsinghrajAll comments
- @Zeref1028Submitted 4 months agoWhat challenges did you encounter, and how did you overcome them?@manishsinghrajPosted 4 months ago
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.
0 - @mirodiljondevSubmitted 4 months ago@manishsinghrajPosted 4 months ago
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 helpful0 - @Ridwan10000Submitted 5 months agoWhat 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
@manishsinghrajPosted 5 months ago1 - @shalriSubmitted 6 months agoWhat 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.
@manishsinghrajPosted 6 months agoGreat work!
I've learned a thing or two from your code approach.
0 - @xarisVavlSubmitted 6 months agoWhat 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?.
- @mesoma-hubSubmitted 6 months agoWhat 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.
@manishsinghrajPosted 6 months agoHi,
For the desktop view, you might consider limiting the width of the card by using a max-width property. :)
0 - @corkangSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
Being honest, I had no idea after adding some tags on HTML. I didn't know what to begin with in CSS, but I started from small things like colors, and searched everything I need and tried it. I'm proud that I finally made it, including the responsive part!
What challenges did you encounter, and how did you overcome them?It was my first time to build a responsive web design, so I had to study about it. I studied about media query and made the background color and some margin settings in it so that it can be changes depends to the size of browser
What specific areas of your project would you like help with?In my CSS code, I feel like things are not really ordered. I just looked for the properties I need, try it and add it without any steps or any rules. So I think I need some advise about how to order them or the steps for using CSS.
@manishsinghrajPosted 6 months agoIts up to your preference to decide the ordering.
Personally I prefer to follow the hierarchy of the HTML structure when arranging CSS properties. I begin by organizing elements based on their position in the HTML hierarchy.
for individual properties I typically start with layout adjustments, like padding and margin, and then styling properties. I group related properties together for easier reference.
For example:
.container { display: flex; justify-content: center; align-items: center; padding: 20px; margin: 10px; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 5px; font-family: Arial, sans-serif; font-size: 16px; }
Marked as helpful0 - @AfterWaGaSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
Had some troubles with section's borders on mobile devices. Still looking for how to fix
What specific areas of your project would you like help with?@manishsinghrajPosted 6 months agoHi,
About troubles with section's borders on mobile devices.
You can include an extra
<div>
before your recipe__title section. So that all your text content resides within this div. and finally, you can apply padding to this div.Marked as helpful0 - @AkhlaqShaikh1Submitted 7 months agoWhat are you most proud of, and what would you do differently next time?
Some styling
What challenges did you encounter, and how did you overcome them?Card components
What specific areas of your project would you like help with?Responsiveness and flex boxes
@manishsinghrajPosted 7 months agoGood work.
You can utilize the <main> element to serve as the background, (bg-yellow), and introduce another <div> element for the card, (bg-white).
Then, systematically include elements within this card, such as the image and text. This will help in readability and a well-structured codebase for developers to read.
0 - @kgomotsosimonSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of building my first on frontend mentor. It is a way of making sure that you understand HTML & CSS.
What challenges did you encounter, and how did you overcome them?I struggled a lot with centering the container but still I don't think I did the right thing but I tried my best to center it.
What specific areas of your project would you like help with?Hey community, I am kind of lost when it comes to make it responsive, because it seems I can't seem to get the screen sizes right.
@manishsinghrajPosted 7 months agoYou did great!. About centering the container you can always try with flex.
The object you want to center. You need to make it's parent element as flex. In your case (according to the your code), body should be made to flex.
It's better to have another div element before the card container and after body. As we don't want to make body as flex( not good practice).
display: flex; justify-content: center; align-items: center; min-height: 100vh;
All you need to do is make it flex.
In order to center it horizontally use justify-content : center.
In order to make it vertically aligned use align-items : center.
And the current min view height should take up to 100vh.
This is the usual pattern one can use to center it.
Marked as helpful1 - @satyamJha002Submitted 7 months agoWhat are you most proud of, and what would you do differently next time?
I am practicing my HTML and CSS skills to complete challenges.
@manishsinghrajPosted 7 months agoCongratulations on completing your first QR code challenge!
I would like to mention the topics you can search and you can start including them in your projects.
Incorporate div elements strategically to enhance UI design. Utilizing divs effectively can significantly improve the structure and layout of your web pages.
Before starting any new project, establish default CSS properties like box-sizing, margin, padding, and font family. This practice ensures consistency and streamlines your development process from the outset.
Expand your understanding of the .root concept in CSS. Mastering its usage will empower you to optimize your styling techniques and create more robust projects.
Marked as helpful0