Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions10Comments4

All comments

  • Dan Bennett• 60

    @inkfromblood

    Submitted

    What I found difficult: Figuring out how to fit the QR code into the container .div effectively. Turned out to be as simple as setting the width to 100%.

    What I'm unsure of: That this approach was the most efficient way of achieving this. When to use px or when the rem.

    I edited the footer links to have a hover state of white, but wanted to change the visited color from purple to blue, however when I changed the visited state it removed the hover state. I'm unsure of how to make this happen.

    QR code component solution

    2

    P
    Zsofia Dalnoki-Papp• 210

    @dalnoki

    Posted

    Hey @inkfromblood,

    Congrats on your first solution!

    About the px/rem debate: this article sums it up in great detail, and it helped me understand the best practices: https://engageinteractive.co.uk/blog/em-vs-rem-vs-px

    I usually convert all of my px values to rems, except for the 1px values :)

    I hope it helps!

    Marked as helpful

    1
  • P
    Zsofia Dalnoki-Papp• 210

    @dalnoki

    Posted

    Hey @ogheneCodes,

    For this challenge, there is no need to use media queries - the card's size shouldn't change, it's 320px wide so it will look nice even on a smaller mobile device (that has a resolution of 375px). If you take a look at the design comparison part of the solution, you can see that the background color does not match, and also the padding, the font size is different than the design.

    You need to make sure that your solution looks good on any resolution (even though sometimes only the mobile and/or the desktop design is provided). In this particular case, if you make the width of the card fixed, it should be fine. If you take a look at your card at 1136px for example, the text overflows the card - so in the future, it's always advised to test your design at all resolutions.

    It's a great thing you organized your files into folders.

    Good luck to you on your learning journey!

    Marked as helpful

    1
  • P
    Zsofia Dalnoki-Papp• 210

    @dalnoki

    Posted

    Hey @jcasare,

    I'm pretty sure that the current solution belongs to the 3-column preview challenge - but this is a solution for the QR code component, that's why the design comparison behaves like this.

    Also, as a general rule of thumb, it's always advised to put your images in an images or assets folder, and also the "Challenge documentation.docx" shouldn't belong to the repo.

    As for the breakpoints: you only get the design for a few resolutions (mostly it is desktop, tablet-portrait, tablet-landscape, and mobile) and you need to make sure that your site behaves well on other resolutions too. You need to adjust your breakpoints accordingly. If you check your project on 568px resolution, the buttons slide out of the card, so you need to look for a solution that works on basically every possible resolution.

    It's also advised to have a "main" HTML element, for example, instead of the <div class="wrapper">.

    I hope this helps, good luck!

    Marked as helpful

    0
  • P
    Zsofia Dalnoki-Papp• 210

    @dalnoki

    Posted

    Hello Robert,

    You did a great job! The design looks great, however, at 320px resolution the text overflows a bit and the 'Why us' part is significantly lighter than the design's color. That's all, have a great day :)

    1