@MombinyaOmboga
Hello there! I'm Haydn and I'm currently finishing up my studies at the University of Connecticut where I also work as a Frontend Developer. I've been using Frontend Developer throughout all stages of my developing journey and most recently have started filming tutorials for YouTube.
I’m currently learning...Currently learning different JS frameworks to enhance my adaptability and skills. At the moment I'm focusing on React
Latest solutions
Latest comments
- P@haydnkerr
Nice final design! Since the design calls for a card to be placed directly in the middle of the viewport a good way to do this one is to skip the .img-container and do all the positioning in the body tag. body { display: flex; justify-content: center; align-items: center; height: 100svh; width: 100% }
this will place the QR card directly in the middle without having to do any further positioning on the .img-holder class
Happy Coding!
- @TheMcnafahaP@haydnkerr
Just so you're aware the preview site doesn't load properly to see the site
- P@haydnkerrP@haydnkerr
For tutorials on some of these challenges check out my channel
https://www.youtube.com/channel/UCpFe7-ADQpEgjnGJnQei8dA
- @IsmailCLNP@haydnkerr
Firstly you overall design is great and very close to the design file. the biggest problem I see you have is the width of the container changing with smaller screen sizes. Luckily for this challenge there is no need for a responsive design so I suggest changing the width of the main container to 100% and adding a max-width so it doesn't take up the whole page.
Additionally if you want to use Margin: auto on the container I would add margin: 0 auto then add 100% height and width for the body so the container will sit in the center of the page
happy coding
Marked as helpful - @Diego-CastilloFP@haydnkerr
Nice design! in terms of cutting off the left side of the image you could use "Transform: translate(-50px)" in CSS. Just replace the pixels with whatever works for you. It won't effect the whole container just the positioning of the image
Marked as helpful - @zawseng13P@haydnkerr
Nice design! your code is well structured, readable and the final design is very similar to the example.
One thing I did notice was the black border around the card that doesn't follow the border-radius. I suggest using "border: 1px solid black" instead of "outline" for the card. This will allow the border to follow the radius and not have that rectangle box.
***it seems the outline works on chrome browser. if you have a look on safari you will see what I'm talking about
Marked as helpful
