@manishsinghraj
@Zeref1028
Submitted
What challenges did you encounter, and how did you overcome them?
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 thats why I tried a different solution which is margin-top.
@manishsinghraj
Posted
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
Submitted
@manishsinghraj
Posted
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
@Ridwan10000
Submitted
What 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
Posted
@shalri
Submitted
What are you most proud of, and what would you do differently next time?
Creating a reusable 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.
What challenges did you encounter, and how did you overcome them?
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.
@manishsinghraj
Posted
Great work!
I've learned a thing or two from your code approach.
@xarisVavl
Submitted
What 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?
.
@manishsinghraj
Posted
Good work!!
@mesoma-hub
Submitted
What 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.
@manishsinghraj
Posted
Hi,
For the desktop view, you might consider limiting the width of the card by using a max-width property. :)
@corkang
Submitted
What 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.
@manishsinghraj
Posted
Its 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 helpful
What are you most proud of, and what would you do differently next time?
What challenges did you encounter, and how did you overcome them?
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?
@manishsinghraj
Posted
Hi,
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 helpful
@AkhlaqShaikh1
Submitted
What 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
@manishsinghraj
Posted
Good 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.
@kgomotsosimon
Submitted
What 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.
@manishsinghraj
Posted
You 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 helpful
@satyamJha002
Submitted
What are you most proud of, and what would you do differently next time?
I am practicing my HTML and CSS skills to complete challenges.
@manishsinghraj
Posted
Congratulations 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 helpful
