Skip to content
OverviewSolutions
26
Comments
22
BADHRI KESAVA RAJA S M
@Badhrikr

All comments

  • BADHRI KESAVA RAJA S M•515
    @BadhrikrPosted about 1 year ago

    Add min-height: 100vh to the body tag inside css fill, it will center the container vertically

    body{
 min-height: 100vh
}
    1
  • Ash3071•80
    @Ash3071Submitted about 1 year ago

    This is my first solution using HTML and CSS, any kind of feedbacks are always welcome.

    Html & Css

    4
    BADHRI KESAVA RAJA S M•515
    @BadhrikrPosted about 1 year ago

    Hi your solution looks good as a starter.

    Try to match the font-size and adjust the padding-bottom of the container.

    Happy coding 😉.

    0
  • David Burgess•110
    @DavidBurgess1984Submitted over 2 years ago

    I'd like someone to review this code please. I'm particularly interested in best practices . What is the best way to use em for font-size? I did hard code the paragraph size to 15px. I'm trying to up my front-end css game.

    Box sizing, import statements, margin, padding, font

    1
    BADHRI KESAVA RAJA S M•515
    @BadhrikrPosted over 2 years ago

    Hello your solution is superb,

    My only suggestion is ,Apply these to your stylesheet

    body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}

    These styles will help your content to be at the centre of the page.

    Happy coding.

    4
  • BADHRI KESAVA RAJA S M•515
    @BadhrikrPosted over 2 years ago

    Hello your solution is superb,

    My only suggestion is ,Apply these to your stylesheet

    body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}

    Happy coding.

    1
  • Donn O'Lochlainn•20
    @donnol87Submitted over 2 years ago

    For some reason I got completely lost in git on this challenge. I finally got to the end of it. Phew! I also think that I might not have this fully optimised for mobile (?).

    In the end I sort of cheated when attempting to center div1 in the middle of the page. I wanted to use flexbox to align it vertically but couldn't get it to work so I simply gave it a 20vh margin-top.

    Probably not the best approach but I welcome any feedback on this. Thanks in advance,

    Donn

    First QR code challenge

    2
    BADHRI KESAVA RAJA S M•515
    @BadhrikrPosted over 2 years ago

    Hello your solution is superb,

    My only suggestion is ,Apply these to your stylesheet

    body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}

    Remove the margin top on the box1

    Use main tag as your box1 to remove accesibility issues

    Happy coding.

    Marked as helpful
    0
  • BADHRI KESAVA RAJA S M•515
    @BadhrikrPosted over 2 years ago

    Hello your solution is superb,

    My only suggestion is ,Apply these to your stylesheet

    body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}

    use picture tag to display images on different viewport width

    <picture>
      <source media="(min-width: 775px)" srcset="./images/image-product-desktop.jpg">
      <img src="./images/image-product-mobile.jpg" alt="">
</picture>

    Check out this link

    1
  • BADHRI KESAVA RAJA S M•515
    @BadhrikrPosted over 2 years ago

    Hello your solution is superb,

    My only suggestion is use picture tag to display images on different viewport width

    <picture>
      <source media="(min-width: 775px)" srcset="./images/image-product-desktop.jpg">
      <img src="./images/image-product-mobile.jpg" alt="">
</picture>

    Check out this link

    0
  • BADHRI KESAVA RAJA S M•515
    @BadhrikrPosted over 2 years ago

    Hello your solution is superb,

    My only suggestion is ,Apply these to your stylesheet

    body{
display: flex;
flex-direction: column
justify-content: center;
align-items: center;
min-height: 100vh;
}
    1
  • BADHRI KESAVA RAJA S M•515
    @BadhrikrPosted over 2 years ago

    Hello, congratulations for your challenge solution.

    I note that your live page isn't showing the image, this error is due the <img> tag in the html.

    You probably missed the dot .

    <img src="**.**/images/youimg.jpg" alt="">

    One dot means that the folder with the assets is in the same folder with the html file. Two dots means that the assets are in a subfolder.

    Try that to see if you image will start to display.

    Remove margin top on container

    Apply

    body{
min-height: 100vh;
justify-content: center;
}

    I hope ir helps you, happy coding 😁

    0
  • BADHRI KESAVA RAJA S M•515
    @BadhrikrPosted over 2 years ago

    Hello your solution is superb,

    My only suggestion is ,Apply these to your stylesheet

    body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
    Marked as helpful
    0
  • BADHRI KESAVA RAJA S M•515
    @BadhrikrPosted over 2 years ago

    Hello your solution is superb,

    My only suggestion is ,Apply these to your stylesheet

    body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

    Remove margin to .qr

    0
  • BADHRI KESAVA RAJA S M•515
    @BadhrikrPosted over 2 years ago

    Hello your solution is superb,

    My only suggestion is ,Apply these to your stylesheet

    body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
    Marked as helpful
    0