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

All comments

  • Leonardo 30

    @LeonCelestino

    Submitted

    Hello! I've been awayy from frontend coding for a while because of the college, and thus I forgot somethings and I am studying from the basics again and going through frontendmentor roadmap to help me build the foundations. I've done the QR Code Component challenge today, and I am looking forward to any critiques and tips to improve my skills.

    A thing I found hard to do was to match the "bottom" of the card with the design and also to match the text breaklines on the screen sizes mentioned on "style-guide", I was able to think just about using padding-bottom and max-width with ch unit.

    Also, I am very insecure about the responsive part, I always struggle on this. Specifically speaking, I don't know if it is properly responsive or accessive, and also if the box or texts sizes should shrink while the screen size decreases, as when the screen width gets smaller then 300px it starts looking weird. I want also to know if it is okay to let the height of the component be as it is, because on really small screens you need to scroll and the card won't fit properly. I also don't know if using max-width with ch on texts is ok.

    What would be the proper way to deal with the issues mentioned on the paragraphs above? And, about my html structure, is it alright ? If not, how could I improve it?

    @annazofka

    Posted

    Hey Leonardo There was no need for a responsive design with this challenge. If you look at instructions, it says "card layout doesn't shift" :) There are not many (if any) screen sizes that are less than 300px in width. From what I understand, the smallest screen size you should design for is 320px. As for breaking the text, why not just use the </br> tag? Alse, media queries should alway sit at the end of the CSS file. Hope this is helpful. A.

    Marked as helpful

    1