Skip to content
OverviewSolutions
10
Comments
14
Han
@hcxweb

All comments

  • Han•320
    @hcxweb

    Hello Darrick,

    To save you the hassle of writing media query for the background, try something like: background-image: url("images/bg-pattern-top.svg"), url("images/bg-pattern-bottom.svg"); background-position: right 50vw bottom 40vh, left 50vw top 50vh; background-repeat: no-repeat;

    Marked as helpful
  • Han•320
    @hcxweb

    Because it's the parent container and you set border-radius of 8px on it, which will allow the child content to overflow.

    Marked as helpful
  • Han•320
    @hcxweb

    Hello Mariana,

    Good job on your first challenge. I've looked at your solution and came with some ideas to help you.

    Let's redo the spacing to simplify the code and make it more responsive:

    1. remove margins for everything (or you can comment them out for now)
    2. add align-items: center to body
    3. add padding to the qrcode class
    4. for the image, add max-width: 100%
    5. add back margin between the image and text (either margin-bottom or margin-top is fine)
    6. you may also use max-width on the text to control its look if need to

    These should make the page responsive and you shouldn't see a scrollbar.

    Let me know if you have further questions.

    Marked as helpful
  • Han•320
    @hcxweb

    Very good job on the responsiveness! I don't think there's a fixed number of screens. I believe that it depends on each project, especially when there's no strict requirement for some of these projects. I think the short answer is aside from the provided design, layout, spacing, and overall feel play into how you decide to do the media query.

    Marked as helpful
  • Han•320
    @hcxweb

    Hello Catherine,

    I like how you added the shadow box. It looks more interesting. I also like how you set the width for qr-container. I was inspired to play with width: min(80%, 20rem), which looks more responsive to me. Anyway, just some thing to share with you.

    Marked as helpful
  • Han•320
    @hcxweb

    Hello Victor,

    To center the card, add these to the body:

    1. min-height: 100vh;
    2. justify-content: center;

    The body is like a container itself. You don't need to use flex in every class. Think in terms of parent and child. For the child to center inside the parent, the parent needs to be a flex container.

    Marked as helpful
  • Han•320
    @hcxweb

    This looks amazing and very inspirational!!

    Marked as helpful
  • Han•320
    @hcxweb

    Hello Brandon, For the background images, try: background-image: url("images/bg-pattern-top.svg"), url("images/bg-pattern-bottom.svg"); background-position: right 50vw bottom 40vh, left 50vw top 50vh; background-repeat: no-repeat;

    Marked as helpful
  • Han•320
    @hcxweb

    Hello Ankitha, To host on GitHub, try this (if you haven't changed the repository structure):

    1. Go to the qr-code-component-main repository, then go to settings (next to Insights).
    2. Click Pages on the left.
    3. Under Source, choose Branch: main and choose folder (root). Click save.
    4. Wait for like two minutes, refresh the page, and it should tell you that Your site is published and you'll see the link.
  • Han•320
    @hcxweb

    Hello LiBee, Well done on this challenge! It seems like after you modified the html and css file, you didn't update your solution in frontend mentor portal, so width: 90% is not showing up when I checked the website. Because you set max-width to 20rem, which is already very narrow, I don't think setting width of 90% actually matters for responsiveness.

  • Han•320
    @hcxweb

    Hello Francis, You solution looks pretty good! To help with your margin issue, try this:

    1. get rid of margin: 1.5rem for the card class,
    2. add gap: 1.5rem for cards class and cards-middle class,
    3. get rid of margin: 1.25rem for the card class for mobile media query You can use gap for flexbox, which works kind like gap for grid.
    Marked as helpful
  • Han•320
    @hcxweb

    Hello Rodrigo, to make this responsive on smaller screens I would suggest using flexbox for this challenge. Using flexbox allows you also to avoid using float (no longer recommended). To answer your questions, it may be okay to use many divs, but it's best practice to use meaningful tags, as div tag has no meaning. For example, in your code, you could use <main></main> for the container, and <footer></footer> for the footer. It's okay to put a div inside another one. Overall, limiting the use of div tag is preferred. You can learn more about the tags here https://www.w3schools.com/tags/tag_main.asp

  • Han•320
    @hcxweb

    Hello DK, I experimented with your social media svg file, and I think the problem may be due to the property of that particular style. You see how your svg files look like the inverse of those in the original design. I recommend using icons from font awesome and see if that helps.

  • Han•320
    @hcxweb

    Marian, You can give this a try: background-image: url("images/bg-pattern-top.svg"), url("images/bg-pattern-bottom.svg") background-position: right 50vw bottom 40vh, left 50vw top 50vh background-repeat: no-repeat

    sorry, I'm not sure how to make the code look formatted