Skip to content
OverviewSolutions
18
Comments
7
Manjesh R V
@manjeshrv592

All comments

  • Manjesh R V•320
    @manjeshrv592Posted over 1 year ago

    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
    2
  • Manjesh R V•320
    @manjeshrv592Posted over 1 year ago

    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
    0
  • Manjesh R V•320
    @manjeshrv592Posted almost 2 years ago

    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
    1
  • Abhishek Daga•10
    @abhishekdagaSubmitted almost 2 years ago

    Font did not work on the site. Additionally, letter-spacing also did not work. This is the beginning of my journey and it was very helpful to explore and search to get the solution. The solution is not perfect but I want to have some inputs from the community to move forward.

    Responsive page using flexbox

    1
    Manjesh R V•320
    @manjeshrv592Posted almost 2 years ago

    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
    0
  • Manjesh R V•320
    @manjeshrv592Posted almost 2 years ago

    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
    0
  • Vaishnavi•10
    @Vaishu03Submitted almost 2 years ago

    Did you find any problem in viewing the QR code in mobile and desktop views?? Any suggestions to improve project code?

    QR Code using html and css

    2
    Manjesh R V•320
    @manjeshrv592Posted almost 2 years ago

    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
    0
  • Manjesh R V•320
    @manjeshrv592Posted almost 2 years ago

    By default browsers font size is 16px.

    1rem always defaults to 16px no matter where you use it.

    1em depends on font size of the parent element. Let's say you have paragraph inside div tag and font size of div is 20px. Then 1em inside that div means 20px.

    Suppose you have another div whose fontsize is 36px. Then 1em will be equal to 36px in that div.

    If your looking to size a child element based on parent then you use em.

    In practice I never use em and I haven't seen it being used in any projects. Always stick to rem. Advantages of em over rem is negligible and em is lot more confusing to use.

    If you want to size child element relative to parent then percentage is the best option.

    Marked as helpful
    1