Skip to content
OverviewSolutions
27
Comments
10
P
Haydn Kerr
@haydnkerr

All comments

  • P
    Haydn Kerr•555
    @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!

  • P
    Haydn Kerr•555
    @haydnkerr

    Just so you're aware the preview site doesn't load properly to see the site

  • P
    Haydn Kerr•555
    @haydnkerr

    For tutorials on some of these challenges check out my channel

    https://www.youtube.com/channel/UCpFe7-ADQpEgjnGJnQei8dA

  • P
    Haydn Kerr•555
    @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
  • P
    Haydn Kerr•555
    @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
  • P
    Haydn Kerr•555
    @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
  • P
    Haydn Kerr•555
    @haydnkerr

    Nice design! Just a few minor things that could be changed to complete this challenge.

    Have you thought about responsiveness? I noticed on smaller screens the container doesn't switch to a column. This could be an easy fix with a media query.

    Additionally you have the correct font for the price however that same font isn't used for the main heading

  • P
    Haydn Kerr•555
    @haydnkerr

    time looks fine over here in the US :)

  • P
    Haydn Kerr•555
    @haydnkerr

    not sure what's happening but the site you linked is different from the challenge

  • P
    Haydn Kerr•555
    @haydnkerr

    Nice work! One thing I can suggest is with the advanced statistics cards you can offset each one vertically by using transform: translateY(__%). in the CSS.

    This will give it that staggered look :)