Skip to content
OverviewSolutions
18
Comments
7

Manjesh R V

@manjeshrv592Bangalore, India320 points

Freelance Frontend developer.

I’m currently learning...

Next JS

Latest solutions

View more solutions

Latest comments

  • Manjesh R V•320
    @manjeshrv592

    On container set min height to 100vh, display to flex, align items to center.

    .container {
min-height: 100vh;
display: flex;
align-items: center;
}
    Marked as helpful
  • Manjesh R V•320
    @manjeshrv592

    Responsive without media queries?

    You can use max-width on card instead of width. So it will occupy 100% if screen is below 380px.

    make sure you add padding to body or section, so your design won't stick to edges of the screen on smaller devices.

    Make sure you reduce overall width of the card and align it vertically at center using flexbox. So it will be more inline with the design file.

    Marked as helpful
  • Manjesh R V•320
    @manjeshrv592

    You have achieved desired results with minimal amount of code. It looks good.

    From design point you can reduce the drop shadow transparency. 0.05 to 0.1 would look good.

    Now coming to css selectors for best practice use classes as much as possible avoid id's.

    Use semantic elements. In your case <div> tag with id name center, replace it with <main> tag.

    Marked as helpful
  • Manjesh R V•320
    @manjeshrv592

    About font family in your css body selector your using font-family property 2times. So the last property value is used by the browser. Just remove font-family: 'Fraunces', serif; in body tag and font will be fixed for body.

    In your css file select all heading tags and set their font family to Fraunce, So it should look something like this h1,h2,h3,h4,h5,h6 {font-family: 'Fraunces', serif;}

    Now browser will use 'Montserrat' for body and 'Fraunces' for titles.

    For letter spacing select the tag and add css property 'letter-spacing'. Play with the values and see what works. 5px would work for this challenge.

    I see image is not visible. You're using wrong path for the src and srcset attributes. According to your folder structure image path should be ./image-product-desktop.jpg or ./image-product-mobile.jpg

    Happy coding 👍

    Marked as helpful
  • Manjesh R V•320
    @manjeshrv592

    Congrats on completing the challenge.

    Some possible improvements you can make

    HTML

    1.For qrcode-content you have used section tag. Section is a semantic tag used to seperate different section of a webpage. A general tag like <div> would make sense.

    2.For best practice make sure you have class name for every tag in your html. In your case <h2> inside qrcode-content can have a classname of qrcode-title and <p> tag can have something like qrcode-text. This isn't issue for small project. When you work on bigger project you have to make sure you have lowest possible specificity for all the elements. This can be achieved by using unique classname for all tags.

    CSS

    1.If you struggle with unique classname for tags like me 😅, I advice you to learn about BEM for naming css classes. This is only for large projects though.

    2.You used flex on qrcode-content which is not necessary. A simple margin bottom on <h2> tag can get the job done.

    3.Your targeting .qrcode-content h1 in your css. But you have used <h2> tag html.

    4.Your setting font to roboto in css but your importing Montserrat font from google in your html. Make sure font you are importing and font being used in css are similar.

    Marked as helpful
  • Manjesh R V•320
    @manjeshrv592

    Your projects is broken on mobile screen and not well aligned in desktop. We can't help you since your github repo link is not found.

    By the looks of it I think you used position absolute which is not necessary in this challenge.

    I just completed this challenge you can visit my git repo in my solutions section or any other solution in this community. So you will know what went wrong.

    Marked as helpful
View more comments