Skip to content
OverviewSolutions
12
Comments
2
Sufiyan Ahmed
@sufiyan0

All comments

  • Sufiyan Ahmed•160
    @sufiyan0Posted over 1 year ago

    Some recommendations regarding your code that could be of interest to you.

    If you want that this solution is responsive, you can follow these suggestions below:

    In order to center the card vertically and horizontally, you'd better add flexbox and min-height: 100vh to the body For the color of the screen, you can use the recommended color in the body body { /* background-color: hsl(218, 19%, 80%); / background-color: hsl(212, 45%, 89%); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } If you use flexbox in the body, you don't need to use margin in the main to center the card If you use max-width instead of width and height, the card will be responsive and you'd better reduce the width a little bit if you want You'd better give padding to give a gap between the content and the border of the card main { / width: 350px; / / height: 550px; / / margin: 100px auto 100px auto; / / font-size: 11px; / max-width: 280px; padding: 20px; } In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% and display: block for the img in this way: img { / height: 300px; / / margin-top: 20px; / / margin-left: auto; / / margin-right: auto; / border-radius: 5%; display: block; width: 100%; } You'd better update margin and font-size of texts in this way h1 { / margin: 25px 30px auto 28px; / margin: 25px 0; font-size: 20px; } p { / margin: 20px 30px auto 28px; */ margin: 0 0 25px; } Hope I am helpful. :)

    0
  • Apah•280
    @apah-devSubmitted over 1 year ago

    Made the following changes to better my code and make it more responsive.

    1. Used a flex box for the body to align all elements to the center without having to mess with the width and height.

    2. Used a flex box for the main container div to align elements in columns and center too.

    3. Used the recommended fonts and colors in the style guide

    Qr code component main using a container div for the image and content

    3
    Sufiyan Ahmed•160
    @sufiyan0Posted over 1 year ago

    In Your project folder you always find style-guide file try to read in and follow the color and font style.

    body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; } use this code to get your component in center of the screen

    Marked as helpful
    0