@yas-avocad
Michael Johnson
@mikej321All comments
- @mikej321
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 helpful - @Nachoho@mikej321
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 helpful - @Janvampierssel@mikej321
Hey 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
- @pypimo@mikej321
Yes, 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
- @PutluruAravindaReddy@mikej321
Hello 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
- @danielcxy@mikej321
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 helpful - @Ace-droid@mikej321
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 helpful - @wassimchakib@mikej321
Hey 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 helpful - @PranavMaru22@mikej321
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 helpful - @rockdoginafog@mikej321
Hello 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 helpful - @king-aggor@mikej321
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 helpful - @toshihikotani@mikej321
Hello there and amazing job on your project!!!
One thing I would suggest to help with the responsiveness of your project is to change the width of 325px on your .content-box to max-width: 325px. This will allow the Flexbox to size itself accordingly. Once you do that, you will be able to make adjustments on how you want it to look when it resizes itself with media queries. Also, remove the height from content-box and add a padding-bottom: ??(whatever value you think is best). This will simulate the height you are looking for without hard-coding it as if anything was ever added, it would cause the design to overflow.
Overall, amazing job and hopefully this helped!
Happy holidays and Happy Coding!
Michael Johnson
Marked as helpful - @sika-007@mikej321
Hello there and great job on your project!
I'd like to suggest this piece of code to improve your project.
add this to the body element
body { display: flex; flex-direction: column; min-height: 100vh; justify-content: center; align-items: center; }
This will center your project perfectly. By changing the body to flex and giving it a min-height of 100vh, you have control over where your project is positioned on both the X and Y axis. The flex-direction being changed to column will cause the attribution to appear underneath your project and the justify-content: center; / align-items: center will center everything in the middle of your page.
I really liked the end result of your project! Keep it up :)
Hope this helped and happy coding!
Michael Johnson
Marked as helpful - @linomattos@mikej321
Hello there and great job on your project!
Some things that I may suggest to help you with your code.
I would remove the width and height from your .container as we typically avoid hard-coding widths and heights into containers. Next, i'd remove the positions from your .container as well as the .card and .attribution. Once you do that, add this to the body.
body { display: flex; flex-direction: column; min-height: 100vh; align-items: center; justify-content: center; }
This will turn the entire body into a flex, the flex-direction will move the attribution directly under the project as you'd want. Now align-items and justify-content axis are swapped due to the flex-direction being changed. The min-height is there to give justify-content something to work with as the Y-axis can't be changed without a height. Lastly, align-items: center and justify-content: center will center everything perfectly. I tend to do this frequently.
Next, i'd remove the hard-coded height from .card and add padding: 1rem .3rem; this will simulate the hard-coded height that was set to the .card.
Of course, the project doesn't have to be done this way but avoiding hard-coded heights and widths will definitely improve the responsiveness of your project. Something I learned from Kevin Powell...if a page has no CSS on it, it is fully responsive. If something isn't responsive, it's something that we did as a developer. This has definitely helped me to improve how I view responsiveness.
I hope this helped and happy coding!!!
Marked as helpful - @Zelize1@mikej321
Hello there and great job on your project.
Some things that may help your code.
I would add this to your code to help with centering the project to the center.
Body { display: flex; flex-direction: column; justify-content: center; align-items: center; }
This should turn your entire page into a flex, the flex-direction will make the attribution always appear underneath your project and the justify-content/align-items portion will center everything on the X and Y axis.
As far as responsiveness goes, everything that has an explicit width in your project should be changed to something more responsive, such as max-width. We typically avoid using hard-coded heights unless absolutely necessary, such as needing a button to be a specific size or an SVG. To avoid using heights altogether for containers, such as your Columns in your project, you could just set a padding to go on all sides. This will create the white-space needed without having to explicitly set a height. A good way to look at it is if it is just HTML with no CSS, it is fully responsive. It isn't until you start adding things that explicitly can't be changed that will make it unresponsive. Once you start understanding that, it becomes much easier :).
Hope this helped and Happy coding!!
Marked as helpful - @Mayordey4u@mikej321
Hello there!
To center your project, I would add display: flex, flex-direction: column to the body. This will change the entire body to a flexbox and the flex-direction will cause the attribution to appear under your project. Next, add justify-content: center and align-items: center to the body. This will align the project in the center on both the X and Y axis. Here is some information on Flexbox.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Hope this helped and happy coding!
Marked as helpful - @Noppanutt@mikej321
Hello there and great job on your project!
A few things I'll suggest to improve your code. On your .card-container, your display: flexbox should be changed to display: flex. Your width: 320px should be changed to max-width: 320px and the height should be removed entirely. The width is being changed to max-width because width's CAN'T be responsive. By changing it to max-width: 320px, you are saying that the container is allowing itself to stretch to at least 320px but never more than that. Try to avoid hard-coded heights as much as possible unless you really need them as they can cause problems when it comes to responsiveness. Once you make these changes, your project should become more responsive. I will link some info to flexbox from MDN to help you as it helped me.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Happy coding!!!
Marked as helpful - @DiyaTyagi@mikej321
Hello there and great work on your first project.
A few suggestions that I can make to improve your code would be to correct your body element as well as your .box element. There are many ways to do this but the easiest in my opinion would be flexbox. Here is the code for it.
body { background-color: #d5e1ef; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; }
.box { display: flex; flex-direction: column; background-color: white; text-align: center; border-radius: 20px; }
I removed all of the padding from the body that you were using to center the content, and changed the bodies display to flex, while changing the flex-direction to column. This will ensure that your content always stays above the footer attribution in the project. Next, I added align-items: center and justify-content: center to center the entire project. Next, your .box element should have a display: flex with a flex-direction of column like the body does. Now your project should be more responsive as a result of the use of Flexbox.
Information on Flexbox from MDN https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
Information on Flexbox from CSS-Tricks...great read!!! https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Hope this helped and happy coding!
Marked as helpful
