@yas-avocadSubmitted 10 months ago
How can I center the box vertically?
Michael Johnson
@mikej321All comments
- @mikej321Posted 10 months ago
Congrats on completing the project!
To center the project vertically, add these following properties to the body in CSS.
body {min-height: 100vh; display: flex; flex-direction: column; justify-content: center}.
Not sure if you're familiar with flexbox or not, but what the code does is it turns your entire page into a flexbox container. The min-height is needed at 100vh (viewport height) so flexbox knows to center it in the middle of the page instead of the middle of whatever the height of the container is. The flex-direction controls the direction that your content is layed out on the page. In this case, you want it to be layed out vertically, so we choose column here instead of row. Finally, justify-content normally centers on the horizontal axis but because we changed the flex-direction, align-items will center on the horizontal axis. Whenever the flex-direction is changed, the property needed to center vertically and horizontally are flipped. Here is more information on Flexbox that would be a great read.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I hope this helps and good luck in your future!
Michael Johnson
Marked as helpful1 - @NachohoSubmitted over 1 year ago@mikej321Posted over 1 year ago
Hello there and congrats on finishing the QR Code challenge!
In your project, you may have noticed that it blew up in size. It did that because it doesn't have a predefined width to go off of, so it's stretching to fit the content. This can be fixed by placing 'max-width: 375px' to your .card class. Once you do that, you'll find it much easier to style the rest of the card's body, such as increasing the font size for the header title and body paragraph.
Hope this helps and happy coding!
Michael
Marked as helpful0 - @JanvampiersselSubmitted over 1 year ago
Ran into some sizing issues that took me way too long to solve, but at last....
@mikej321Posted over 1 year agoHey there,
Something that I learned that may be of value to you that I got from a book about Tailwind...when it comes to sizing, just attempt to get it as close as you can and go from there. As long as it's close enough, it's fine and not to worry about being 'pixel perfect'. I remember I would do the same, constantly changing values to get it to be exactly the same. It is headache inducing, haha! Hope this is of some value to you and happy coding!
Michael
0 - @sashaulySubmitted over 1 year ago
It's hard to do without a Figma project. But anyway, it was very interesting!
@mikej321Posted over 1 year agoHello there, Aleksandr and congrats on finishing your first project!
A few pointers that can help this more closely to the finished design...if you add a 'padding-inline' of 1rem to the .wrapper-desc as well as adding around 1.3rem of line-height to it, you can make the final paragraph closer to the design.
Furthermore, changing the h2 tag's 1.25 rem to maybe 1.4rem would match the design a little better.
Finally, I would remove all of the position elements and transforms that are located on your wrapper and instead, plug this into the body tag. set the min-height of it to 100vh, this will make the body a full height so you are able to position correctly. Next, apply these styles to the body tag as well 'display: flex;' 'flex-direction: column;' 'align-items: center;' 'justify-content: center;' 'gap: 1rem;'
More info on flexbox is located within this link
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I wish you luck on your studies, you did great!
Michael
Marked as helpful0 - @pypimoSubmitted over 1 year ago
Q1. Can we use semantic html tags like <section>, <article> when trying to style elements. Or only when they contain tags. Q2. Since section tag is generic can we completely omit div tags and use them instead Q3. Should we enclose section tag in article, or article tag in section
Thanks for checking my solution! Have a great day ✨
@mikej321Posted over 1 year agoYes, you should wrap content in semantics...it could even be helpful to know that semantic tags can also be wrapped in divs, in case that ever confuses you like it did me. What I normally do is look at the flow of the design that I'm viewing and look for obvious gaps in content, maybe whitespace. At the top, I'd do a header tag, then everything else would be under a main tag. If the site has a footer bar or in the projects case, you could even wrap the attribution to you in a footer tag. I hope this helps and I wish you luck on your journey!
Michael
1 - @PutluruAravindaReddySubmitted over 1 year ago
I felt difficult in making it responsive
@mikej321Posted over 1 year agoHello there and congrats on finishing this project!
As Tushar has pointed out, your issue with responsiveness comes from breakpoints that are too small. Here is another article that can get you going.
https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/
Unless you've made a tablet version as well, having a breakpoint at 375px is too small as that content will flow off of the screen and be hidden from users. Luckily, it's easy to learn media queries and I believe you'll have it in no time. I wish you luck on your journey, my friend!
Michael
1 - @danielcxySubmitted over 1 year ago@mikej321Posted over 1 year ago
Hello there!
A few things that can help you along your journey...there should be a file in the challenge files that contains all fonts and colors needed for the project. Find the font (usually at the bottom) in the file and it should take you to Google Fonts. Grab the font weights that they ask for and then import it via CSS or the link tags that they give you, that should fix the font issue. Also, if you remove the margins from the text at the very bottom and place padding-inline: 32px, it should center that text. I'm going to leave a few mdn articles that can help you along the way. Congrats on finishing the QR code project and I wish you luck on your journey in the future!
Michael
https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline https://www.freecodecamp.org/news/how-to-use-google-fonts-in-your-next-web-design-project-e1ad48f1adfa/ (they teach you how to go to google fonts and put the fonts in your project but in this case, the link to google fonts is given to you in the project files. It should directly lead you to the font that they want)
Marked as helpful0 - @Ace-droidSubmitted over 1 year ago@mikej321Posted over 1 year ago
Hello there and excellent work on your project!
A quick tip I could give you for the future is to constrain your site to a smaller size, so that the user doesn't need to view the site from left to right. I learned from reading a book about UI that it's better to constrain the site's size to where the user only has to look forward and slightly left or right. It will also solve the problem of your site's pictures appearing like they are cut off in the comparison pane above, although the pictures look perfectly fine when you visit the site. I would suggest maybe 1600px as a max, but tinker around with it and find a size that fits you. Other than the size of it, it looks brilliant! I hope this helps and good luck on your journey!
Michael
Marked as helpful0 - @wassimchakibSubmitted almost 2 years ago
How can I improve my code in CSS?
@mikej321Posted almost 2 years agoHey there,
Your project looks great!
One thing that could really help bring it closer to the design would be to add a box-shadow to your .container.
box-shadow: 3px 3px 15px hsla(220, 15%, 5%, 0.2);
this is a box-shadow that I whipped up really quickly but I am going to link an article that really helped me learn box-shadows.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
Hope this helps and Happy Holidays!!!
Michael Johnson
Marked as helpful1 - @PranavMaru22Submitted almost 2 years ago@mikej321Posted almost 2 years ago
Hello there and congrats on finishing your project!
Some things that I may suggest to help improve your code.
Change this in the body element
body { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
This should center the project within the center of the page. Next, remove the margins from your .section and instead, put those same margins in a padding attribute on the .section. This should place the content where you want without using margins as that will throw the alignment of your project off. Finally, for semantic purposes, the <main> tag should wrap around the <section> tag and contain all of your html except the <footer> tag. This should help with the semantic check.
Hope this helped and Happy Holidays!!
Michael Johnson
Marked as helpful0 - @rockdoginafogSubmitted almost 2 years ago
This is my first time doing something with css and html. I really enjoyed doing something other than just learning css with no idea what to do with it. I learned so much more than just watching tutorials on yt.
@mikej321Posted almost 2 years agoHello there and congrats on finishing your first project, the feeling is really special when you finally do one on your own :).
Something that could help your code.
place this in the body
body { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
This should center your content perfectly in the middle of the page. Next, remove the hard-coded width and height on your #border as that causes it to not be responsive anymore. Replace the width with max-width: 400px, this will cause it to be responsive. Max or min width is almost always a better use case than using width, but there are situations where you'd like to use it still. Always avoid using heights unless absolutely necessary, as they can cause overflow issues if you aren't careful. Finally, remove the position property and values from your #border element. They aren't needed here as the flexbox will center the project without it. Overall, great job on your first project!!!
If you ever need anymore help, I'm always over on Slack
Michael Johnson
Marked as helpful1 - @king-aggorSubmitted almost 2 years ago@mikej321Posted almost 2 years ago
Hello there!
There is a linking issue with your project but it's pretty simple to solve. Add a . before the / of your hrefs in the link tag and the img tag. They should look like this when finished.
<link rel="stylesheet" href="./style.css" /> <img src="./images/image-qr-code.png" alt="qr-code" />This will properly link your files in your project to GitHub and show properly on frontendmentor.
Happy Coding, my friend and Happy Holidays!
Michael Johnson
Marked as helpful1
