@ga72Submitted 3 months ago
P
whiteriver-dev
@whiteriver-devAll comments
- @whiteriver-devPosted 3 days ago
Consider making your HTML 100% of the viewport height. As you can see your background cuts out only to the length of the html and body container.
You also forgot to import the font.
I see you used Tailwind, as I'm not proficient in it I cannot give advice on that but it appears the columns are not aligned.
Besides a few touchups, the site seems to function as intended.
0 - @Top-Trekx-Im-gvp-98Submitted 19 days ago@whiteriver-devPosted 19 days ago
You made the "grid container" with flex instead of grid. I believe the purpose of this challenge is to use Grid not Flexbox. I would recommend going over the Grid section in the learning path and trying to apply that knowledge to this challenge.
However, you still made it work and it looks quite similar to the design. I would just also recommend using gaps and settings widths of the text section at the top so it matches the design.
0 - @MurielM87Submitted over 1 year ago@whiteriver-devPosted 23 days ago
Everything looks good and very similar to design. One thing I noticed is that if you open the site in a windowed mode (in desktop size) and play around with the window sizes, the container for your content doesn't stay in the middle. This is because you set:
margin: auto; margin-top: 60px;This makes your left margin also 60px. This means that your image can slightly move but as soon as the margin hits it will no longer move. So if I open your site with a half open browser, the image will be half out of view.
The way I would solve this issue is add margin only for the mobile view but as you can center the container using flexbox - you do not need a margin for the desktop version as all the content is already centered:
display:flex; justify-content: center; align-items: center;Marked as helpful0 - @Christ778Submitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I am glad that I was able to represent this project accurately and I would like to use javascript
What specific areas of your project would you like help with?I would like to master javascript
@whiteriver-devPosted 24 days agoLooks good besides missing some design details. Everything is structured well and did a good job with the lists. One thing however that I was told was not to use empty <Divs>. For example in your code its:
<div class="container"> <div class="cont">You use a Div inside an empty Div - that could be avoided I believe. Other than that well done.
0 - @ElijahOluwasegunSubmitted 25 days agoWhat are you most proud of, and what would you do differently next time?
I would say I am most proud of not giving up on this project. Early on, my computer died while working on this project erasing all my data which made it hard to concentrate on finishing the project. I am glad that I pulled through to finish this challenge.
One of the things I would probably do differently is to be patient with myself, not being in a hurry to finish while enjoying the process.
What challenges did you encounter, and how did you overcome them?One of the challenges I encountered was finding the right resources to help me solve the challenge. I overcame this by reading various articles, resources and watching videos extensively. Additionally, I also joined communities that helped to improve my knowledge about HTML and CSS.
What specific areas of your project would you like help with?I would love help with writing a good commit message. I would also love help with CSS flexbox, specifically where the class = qr_sect. I was wondering if there is a way for the whole qr-code component to be in the center of the page both horizontally and vertically without using margin properties as I did.
@whiteriver-devPosted 25 days agoLet me help you with the question regarding centering as I had the same issue. I can see that you had set up flexbox and had justified and aligned to center which is good. However, I believe you do not need the outer section div.
As to centering, the reason why it's not working as intended is because your body is not full height (you can see this when hovering over it in 'Inspect Element' on Google Chrome'. So it would only center items within the boundaries of the body which is not full size. The way I fixed this in my project was:
html, body { background-color: #D5E1EF; height: 100%; display: flex; justify-content: center; align-items: center; }
The height sets the body to the entire page. Then everything within body is centered with flex. Hope this helps.
0 - @marliedevSubmitted 25 days ago@whiteriver-devPosted 25 days ago
Very nice and I like how its customized! As a beginner myself, the code looks really high level and neatly organized. Your CSS file looks very well organized - I'm going to be sure to take a page out of your book for that! Well done.
Marked as helpful0 - @israelmacdeucesSubmitted 28 days ago@whiteriver-devPosted 25 days ago
Everything looks good except try center it more. I like to do it by setting the height of the HTML to 100%, then display flex and justify and align content to centre. Also missed some design details such as author picture size, and the title color change upon hover but other than that looks good !
0 - @engelbrechtzSubmitted 27 days agoWhat are you most proud of, and what would you do differently next time?
Responsive design, add sleek ui on smaller screens
What specific areas of your project would you like help with?Feedback appreciated!
@whiteriver-devPosted 27 days agoTry centering it more, if you look closer - the design is in the centre of the page, whereas yours is towards the top. I had the same problem and to fix it, I made sure that body was full width and height. Then I used display flex, and ensured that content is justified and aligned to centre. Hope this helps!
0
