Skip to content
Submitted 11 months ago

QR Code Component

cpylypow•30
@cpylypow
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

hello everyone what do you think of the project so far? what changes would you suggest going forward thanks

Community feedback

  • Kimo Spark•2,190
    @kimodev1990Posted 11 months ago

    Really Great work in completing the challenge, Just a few feedbacks:

    • Wrap the page's whole main content in the <main> tag.
    • Starting from 400 px in layout's width for viewport dimensions and decreasing, You might notice your font-sizes becomes larger and isn't responsive for smaller layouts ( mobile devices ). For making your design more responsive ( here & future designs ) , You could use clamp ( ) method in your coding for font-size, width, margins, padding, etc., So the designed sizes will change according to the viewport dimensions having a responsive design and will be suitable for any device layout.

    Hope you find this Helpful.

    Other than that, Really Nice work & keep Going on

    Marked as helpful
    0
    cpylypow•30
    @cpylypowPosted 11 months ago

    @kimodev1990

    Thanks for the feedback i have noticed that FEM gave me some yellow warnings ..Document should have one main landmark

    <html lang="en">... and All page content should be contained by landmarks <div class="container"> it looks like i have these all ready in the index so not sure why it would trigger it
    0
    cpylypow•30
    @cpylypowPosted 11 months ago

    @kimodev1990

    when i added the <main> tag those warnings cleared thanks again

    0
    Kimo Spark•2,190
    @kimodev1990Posted 11 months ago

    @cpylypow You're always welcome, Anytime....

    0
    cpylypow•30
    @cpylypowPosted 11 months ago

    @kimodev1990

    in your 2nd feedback you mention clamp for css is there a starting size for the clamp?

    0
    Kimo Spark•2,190
    @kimodev1990Posted 11 months ago

    @cpylypow You can control the starting size for clamp method, Here is clamp calculator which defines starting & end viewport dimensions and starting & ending size of the element https://www.marcbacon.com/tools/clamp-calculator/

    Hope you find this Helpful.

    0
    cpylypow•30
    @cpylypowPosted 11 months ago

    @kimodev1990

    i did make a few changes to the css is there a good website or something to see how the changes would look on different devices ? thanks for the link

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord