Had some difficulties to center everything.Would love any kind of help

Community feedback

• 

  Jhon Alessandro (@Master_Aless)•140

  @The-BoxHead-GuyPosted 9 months ago

  Hey bro, nice to meet you

  body {
    background-color: rgba(213, 225, 239, 255);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    align-items: center;
    display: flex;
    justify-content: center;
    /*! margin: 14rem 20rem; */
    font-family: 'Outfit', sans-serif;
    width: 100vw;
    height: 100vh;
  }
  
  .container {
    background-color: white;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /*! height: 100%; */
    /*! width: 25%; */
  }
  
  img {
    /*! width: 66%; */
    /*! height: auto; */
    /*! border-radius: 1rem; */
    /*! margin-left: 4.4rem; */
    /*! margin-top: 1rem; */
    width: 20rem;
    border-radius: 0.5rem;
  }
  
  h1 {
    color: rgba(104, 111, 125, 255);
    font-size: 1.35em;
    text-align: center;
    width: 25rem;
  }
  
  p {
    color: rgba(150, 155, 161, 255);
    font-size: 0.95rem;
    text-align: center;
  }
  
  .qr-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    padding: 2rem 0.5rem;
  }
  

  I've edited your app's css stylesheet, I've highlighted the changes within "comment blocks" and since I've seen that you like to work with flex, I adjusted the solution using it.

  If you want to go through it in detail, let me know

  Marked as helpful

  1
• 

  Hassan Moataz•1,860

  @hassanmoaaPosted 9 months ago

  Hello @Shuhratov!

  Congrats 🎉!

  Here are some suggestions..

  1.Remove the margin from the body, never put any margin on the body or the html.

  2.Remove the width from the H1 element, instead adjust your font-size

  3.Increase your container’s width or set a max-width instead to make it bigger than the elements inside

  4.Make your image display: block;

  body {
    margin: 0;
    margin: 14rem 20rem;
  }
  
  h1 {
    width: 25rem;
  }
  
  .container {
    width: 25%;
  }
  
  img {
    width: 66%;
    height: auto;
  }
  
  

  1
• 

  Levis Kim•1,200

  @Orekihotarou-kPosted 9 months ago

  Hi there @ShuhratovSuhrob, congrats on completing the challenge. In order to properly center the qr-container element, I would recommend that you use CSS flex-box or CSS grid. With CSS grid, the styles should look something like this container styles

  .container {
  display: flex; 
  align-items: center; 
  height: 100dvh;
  }
                           
  

  qr-container styles

  .qr-container {
  max-width: 300px; *setting a max-width ensures that the element doesn't grow past 300px*
  margin: 0 auto; or margin-inline: auto;
  padding: 1rem;
  border-radius: 1rem;
  *all other styles*
  }
  

  I noticed that you didn't create a reset to override the default styles. different browsers interpret styles differently. A reset sets all basic styles (like margin, padding, font size) to the same starting point, like preheating your oven, so your website looks the same across all browsers. This helps avoid surprises and makes your life easier! A basic reset might look something like this

  *,
  *::before,
  *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }
  

  But it doesn't end there. Resets can be created to target specific elements like in this article about modern CSS resets Modern CSS resets by Andy Bell. I just created a YouTube channel where I do frontend challenges and this one was the first one I did. Feel free to take a look Qr-code-component-solution

  0

  ---

  

  Shuhratov Suhrob•100

  @ShuhratovSuhrobPosted 9 months ago

  Hello @Orekihotarou-k, good day!

  I have looked into your youtube channel and found helpful codes that I will be using too. Thank you for the recommendation.

  As for the codes, let me take a look at everyone's solutions and try them out too. I will reply back when everything is done

  Happy coding!

  0
• 

  Rawan Mohamed•130

  @rawannmmohamedPosted 9 months ago

  Hello, you can solve this problem by setting the container width to 300px to make it fixed.

  have a nice coding !

  0