Skip to content
Submitted over 1 year ago

QR code component card

Oreoluwa Samuel Akinbo•100
@KingHorey
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

  1. I had issues with the margins and size of the divs. However, I used my discretion in creating one with the dimensions I felt were right

  2. When using the inspect tool in chrome and resizing the webpage, the paragraph element just out of the div and I do not know how to resolve that.

Here's the link to the image code below:

HTML code

   <div class="text">
      <h1>Improve your front-end skills by building projects</h1>
      <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </div>

CSS code

h1 {
    font-family: "Outfit";
    font-size: 17px;
    font-weight: 700;
    color: hsl(218, 44%, 22%);
}

.text {
    width: 80%;
    margin: 0 auto;
    height: auto;
    position: relative;
    bottom: 5;
    top: 4%;
    word-wrap: break-word;
}

p {
    height: inherit;
    font-family: "Outfit";
    font-size: 15px;
    color: hsl(220, 15%, 55%);
    font-weight: 500;
}

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 1 year ago

    Hi, Oreoluwa Samuel Akinbo! 👋

    The card is not responsive because you set width and height to most of the elements. You must not do that. You should remove them.

    You only need to set a max-width to the card element. This allows the card to shrink if ever needed and the card to grow until the specified value of the max-width. In short, the card will be responsive.

    Some other suggestions:

    • Use a CSS reset whenever you start a new project. This can help you set the styling foundation easily. My recommendation — A Modern CSS Reset | Andy Bell
    • To make the image not overflowing, you should make the <img> element a block element and set max-width: 100%.
    • Remove <div class="image-div"> and <div class="text">. You do not need to wrap the QR code and the text with <div> elements.
    • Don't use relative positioning.

    I hope this helps. Happy coding! 👍

    Marked as helpful
    1
  • Zsolt Varjú•490
    @zsoltvarjuPosted over 1 year ago

    Hello Oreoluwa Samuel Akinbo!

    I checked/tried your code keep practicing and keep up the good work, congratulation to you for working on this project!

    Here are my suggestions:

    • As mentioned in Vanza Setias comment if you use max-width your .attribution container instantly becomes more responsive.
    • i would suggest that in the .image-div class you delete the margin-top and margin, instead use padding (1rem for example) This way you can make a nice white lane around the image.
    • Also in the same class you can remove the width and height because it will resize automatically according to its container size

    Please take my advice lightly, i am a beginner too and my advice is according to the best of my knowledge, i might be wrong.

    1
    Oreoluwa Samuel Akinbo•100
    @KingHoreyPosted over 1 year ago

    Well, we are all learning.

    I will look into the recommendations and let you know how it goes @zsoltvarju

    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