Skip to content
OverviewSolutions
10
Comments
9

Fernanda

@ferlagherUruguay180 points

Just a Student.

I’m currently learning...

HTML & CSS, JavaScript, Node.js.

Latest solutions

View more solutions

Latest comments

  • Fernanda•180
    @ferlagher

    Hi, Ravindra!

    There are many ways to make a design responsive. You can use media querys, relative units, flexbox, grid, or a combination of all of them.

    Here are some resources:

  • Fernanda•180
    @ferlagher

    Hi, nice work with your solution!

    Here are my recomendations:

    • Add to the body min-height: 100vh, display: flex and align-items: center, for center your card.
    • The wite space under the button it's because the content has too much horizontal space and can't wrap. In the .content class, make the padding bigger (3rem) so the content fills the container vertically and it matches the design.

    Hope it was helpfull!

  • Fernanda•180
    @ferlagher

    Hi! Your page is not displaying correctly because you don have any "index.html" in the root of your repository. You have to rename your "qrCode.html" to "index.html". This applies to any website, the home page must always be "index.html" and it has to be in the root of the project. I also recommend you to move the styles to an external css file (just copy all the code inside the style tags, without the tags) and then link the css to the index.html using <link rel="stylesheet" href="./path/to/your/css"> inside the <head> tag.

    Marked as helpful
  • Fernanda•180
    @ferlagher

    Hi, nice work with your solution! I like the hover effect on the button! 👍🏻

    You don't need to use <br/> for the line break! In this case, the difference between desktop and mobile layout is due to the padding of the right/bottom container. It's a bit hard to notice, but it's slighty bigger in the desktop view, that makes the text wrap erlier than in the mobile view.

    Also, I reccomend the <picture> container for the img. You can specify many sources for your image and when they displayed or not, depending on the viewport. I personally find this way easier than using media queries. And you can give your <img> a width:100% and a height:auto to keep the aspect ratio.

    Marked as helpful
  • Fernanda•180
    @ferlagher

    Hi, congratulations on completing the challenge! You can use an asterisk for the reset instead of writing every single element, like this:

    * { /* your rules here */ }

    That way you can save a lot of lines in your code.

  • Fernanda•180
    @ferlagher

    Hi, I had the same problem with the fonts. I fixed it by disableing the optical size option in Google Fonts and re-importing the fonts to the project.

    Here is the said option

    Marked as helpful
View more comments