Skip to content
OverviewSolutions
17
Comments
12
Christopher Till
@chri55

All comments

  • Christopher Till•1,070
    @chri55

    Hi Karin, very nice work on the design!

    One aesthetic suggestion I would recommend is putting cursor: pointer on the .button class instead of the contained a, this way the user knows the entire button is clickable.

    As for your code, very nice. You used media queries which is good, but something I'd do is make one large section for a media query at the end or beginning of the file, since it seems you wrote the same media query over again multiple times. It'll let you write less code overall! See this code on my GitHub for an example of the structure of a larger media query section. Don't mind the content, as its from a different challenge.

    Keep it up, happy coding!

  • Christopher Till•1,070
    @chri55

    Hey Robert, I saw your updated question about the error message placement. In looking at your code I saw what you meant by transforming the button's location when the error message is shown.

    I think your solution fine for desktop, where space is ample but on mobile transform could become weird at any point, or on any device/browser. So I replicated a quick example of your form on CodePen and modified some things so that no transform or opacity is necessary on mobile. Take a look and let me know what you think, I left some more detailed comments about what I did in there.

  • Christopher Till•1,070
    @chri55

    Hi Tomy,

    If you look in your developer tools console after searching an IP, you may see an error which says "Mixed Content": your fetch call is getting data over http, but the app itself is being served on https through Vercel. Change your URL in the fetch call to use https and it should at least be able to make the call to the API once deployed.

  • Christopher Till•1,070
    @chri55

    Hey Robert, well done. A couple answers to hopefully point you in the right direction:

    1. I think I read your question right, you said you tried to use a media query with vw in place of px. The vw and vh units (like rem and em) are relative units, and they are relative to screen size rather than absolute, so it's always best to use an absolutely defined unit like px to ensure the media queries work.

    2. I believe some browsers set the outline property by default when an input field is clicked on, try adding a state rule for :focus on the text box and give it outline: none and see if it works. However this is not recommended in production as visual impaired users need that outline to see what they have selected.

    Great work, hopefully I answered some of your questions, and good job matching the design!

  • Christopher Till•1,070
    @chri55

    Very nicely done, looks great on mobile and your code is neat, concise, and easy to read. Great work!

  • Christopher Till•1,070
    @chri55

    Looks great on mobile, good job with responsiveness!

    The tiny suggestion I have would be to add the box shadow to the card itself, and the sign up button, but that's just a very small detail. I feel it helps solidify the "card" look and make it more obvious to the user. It also helps the white to stand out against a light grey background.

  • Christopher Till•1,070
    @chri55

    Hey, very nice on the layout!

    A few suggestions, try to get the paragraph text under the h1 to be a little darker, as it's hard to read on the light background. Same with the background of the star cards, it's a bit too dark to read the text. Try experimenting with some of the colors in the style guide.

    Also, a little bit more padding on the dark magenta cards would be nice, to space them out a little bit.

    Good work so far!

  • Christopher Till•1,070
    @chri55

    Hey Steven, nice work! Don't forget to add commas in on the font-family property when specifying fallback fonts in CSS. Example: font-family: 'Poppins' , sans-serif;

    Also, you can utilize the * { } css selector at the top of your file to define a base font that will apply to all elements (this is typically recommended) so that you don't have to keep repeating the font-family property throughout the code, and only need to change it when specifying things like headers that have a different font type.

  • Christopher Till•1,070
    @chri55

    Hi Stoefy,

    You have the right idea so far, where the elements stack once they hit the media query size. Good work on that! You also did a great job at matching the design colors and styles, and your use of great semantic HTML is a plus. One thing I would say to improve readability would be to split up the long <p> line with lots of <br> inside. But otherwise, was quite clean and easy to read.

    I suggest doing some research into Flexbox.

    For this I recommend going through the side of Parent Flex Container first as it goes over the essentials of FlexBox. It is a bit different from the flex property that you used in that it allows a lot more options for alignment and justification of items inside the flex container. It's also a really great way to make a component become centered inside of the container or inside the page, like it is in the design.

    You may also notice that it could be useful for mobile, as flex children that are stacked in row format on desktop can be moved to column format on mobile without having to move too much code.

    Check it out, and let me know what you think! Happy coding!

  • Christopher Till•1,070
    @chri55

    Hey Braian, very nice!

    Between about 850px and 640px, the text in the bottom columns tends to get a bit cramped. When this happens, but I still want the page to be in "desktop" mode more than "mobile" mode, I let the outermost container take up some more space. I'd recommend using a short media query of max-width 850px to make .principal-container a bit wider and you will see the space of the bottom columns free up a bit and look nicer.

    Well done on the responsiveness, it looks good in both modes!

  • Christopher Till•1,070
    @chri55

    Nice work, Thomas. If you were to use a media query to change the flex direction of .boxes to be column at a certain point (at and below 750px would be my estimate), you can stack the boxes nicely. Then the inner boxes can also be allowed to take up more width.

    I also liked your solution for adding the tops of the boxes using a border color. Well done!

  • Christopher Till•1,070
    @chri55

    Hey Rodrigo, Very nice solution. You've matched the desktop design very closely. For mobile, I would recommend using flexbox ( https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ) on the bottom 2 containers, coupled with media queries, so that once the screen is small enough, the containers will stack into a column shape. I also think using a bold font weight on the sign up button would increase contrast and make it easier to see. Well done, and happy coding!