MHAMED OUZED• 40
@Mohda24
Submitted
i think its simple projuct i didnt have a lot of difficult but i think the only problem is when i wanted to center it
P
Jordan Herrera Vera
@jordanheve
All comments
- PJordan Herrera Vera• 440
@jordanheve
Posted
Congratulations on completing the challenge! Your commitment to learning is commendable. Regarding centering elements within a document, I recommend using CSS properties like 'margin: auto' for block-level elements or 'text-align: center' for inline elements. Experimenting with flexbox or grid layouts can also provide more advanced centering options based on your specific requirements. You can center elements using flex like this
.container { display: flex; justify-content: center; /* Center horizontally * align-items: center; /* Center vertically */ min-height: 100vh;/* Full viewport height */ }Each element inside the .container will be centered. Keep up the fantastic work in your coding endeavors! . Keep coding and exploring new ways to enhance your skills
Marked as helpful
1 - SinBin10• 20
@SinBin10
Submitted
Hello, I am Binay, thank you so much for putting this project out it was really fun to build.
I have a doubt regarding the project, How do I add the shadow which is shown in the desktop version?
Hoping for a reply, Thank you again.
PJordan Herrera Vera• 440@jordanheve
Posted
Hi great job completing this challenge, to add shadows in CSS, you can use the box-shadow property. The box-shadow property allows you to create shadows around an element. box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color;
Here's an example:
.main-element { box-shadow: 5px 5px 10px #888888; }1 - Reno08-code• 300
@Reno08-code
Submitted
Hi ~Everyone, I need your help. When the screen is larger than 768 pixels, only half of my content is displayed, and the thank-you div is also not centered on the screen. I have been trying for a long time to solve this problem, but nothing seems to work. Can anyone help me figure out what's going on? Thank you.：）
PJordan Herrera Vera• 440@jordanheve
Posted
Hi! I would recommend moving the .thankyou div inside the main element and wrapping the form in another div element to center the main content. Usually, I do this on the body:
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; }The min-height value tells the browser to use 100% of the screen height. By default, it uses 100% of the width but not the height. So, by doing this, you can now center the main container.
I hope my comment is being helpful to solve your problem Keep coding! :D
Marked as helpful
0 - IgnatiusVisnu• 70
@IgnatiusVisnu
Submitted
I find difficulties on controlling the left and the right gap of the QR code image and the white space. That resulted in me not being able to make a more similar looking website compared to the design, as I feel that aforementioned gaps in the design are smaller than the one I made. Instead of minimizing those gaps, I used paddings to push the image lower, to match the left and right gaps which I couldn't control. Feedbacks are very appreciated on how to solve it
PJordan Herrera Vera• 440@jordanheve
Posted
I would recommend using REM or EM units instead percentage units for example:
main { padding: 2rem; margin: 1rem; } h2 { margin-left: .5rem; margin-right: 5rem }I usually use percentages to manage the width or height on some divs or buttons hope I've helped :)
0 - Mediteran2910• 90
@Mediteran2910
Submitted
PJordan Herrera Vera• 440@jordanheve
Posted
On the css document I would use the * selector to remove margin and padding, instead typing most tag selectors like this:
* { margin: 0; padding: 0; }Marked as helpful
1
