Muriel M.• 470
@MurielM87
Submitted
P
whiteriver-dev
@whiteriver-dev
All comments
- Pwhiteriver-dev• 90
@whiteriver-dev
Posted
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 helpful
0 - Christ778• 20
@Christ778
Submitted
What 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
Pwhiteriver-dev• 90@whiteriver-dev
Posted
Looks 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 - ElijahOluwasegun• 10
@ElijahOluwasegun
Submitted
What 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.
Pwhiteriver-dev• 90@whiteriver-dev
Posted
Let 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 - Martin Liesche• 180
@marliedev
Submitted
Pwhiteriver-dev• 90@whiteriver-dev
Posted
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 helpful
0 - israelmacdeuces• 40
@israelmacdeuces
Submitted
Pwhiteriver-dev• 90@whiteriver-dev
Posted
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 - Declan• 270
@engelbrechtz
Submitted
What 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!
Pwhiteriver-dev• 90@whiteriver-dev
Posted
Try 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
