Skip to content
OverviewSolutions
27
Comments
10
Haydn Kerr
@haydnkerr

All comments

  • Haydn Kerr•535
    @haydnkerrPosted 12 months ago

    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!

    0
  • Haydn Kerr•535
    @haydnkerrPosted 12 months ago

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

    0
  • Haydn Kerr•535
    @haydnkerrSubmitted 12 months ago

    Had a go at trying Accordion Menu with no JS using details and summary HTML, the biggest issue I had was with the summary::after icon clipping on mobile screen size, this is something I need to look at a bit more and figure out why it is happening.

    Accordion Menu with no JS

    1
    Haydn Kerr•535
    @haydnkerrPosted 12 months ago

    For tutorials on some of these challenges check out my channel

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

    0
  • Haydn Kerr•535
    @haydnkerrPosted 12 months ago

    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
    1
  • Haydn Kerr•535
    @haydnkerrPosted about 1 year ago

    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
    0
  • Haydn Kerr•535
    @haydnkerrPosted about 1 year ago

    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

    0
  • Vanitas•30
    @LucasLC174Submitted about 1 year ago

    The image was difficult for me, I didn't know how to change it using the media and why sometimes it didn't come out.

    CARD COMPONENT

    1
    Haydn Kerr•535
    @haydnkerrPosted about 1 year ago

    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

    0
  • Haydn Kerr•535
    @haydnkerrPosted over 3 years ago

    time looks fine over here in the US :)

    1
  • Dan•90
    @gawnadSubmitted over 3 years ago

    Hello fellow coders, Just completed another project. Love this site as it gives me hands on experience with the code as I'm sure we have all been on an online course and feel like we have learnt so much till it comes to building a site yourself and end up stuck. Please feel free to comment on how my code looks and anything that would be a better practice for me as I'm willing to learn and giving it 110%

    Thank you in advance.

    stats-preview-card-component-main

    2
    Haydn Kerr•535
    @haydnkerrPosted over 3 years ago

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

    0
  • Krista Calleja•300
    @KristaCallejaSubmitted over 3 years ago

    So proud of my JS file! Really enjoyed doing this back-end. For some reason whenever I try to load the image on the background (in "Boost your links today") it messes up the page. The circles above the boxes were a hassle in desktop mode. Accepting feedback as I am looking for a professional position. Thank you.

    Vanilla JavaScript

    1
    Haydn Kerr•535
    @haydnkerrPosted over 3 years ago

    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 :)

    0