maym42

Latest comments

• 

  yAshr•60

  @Exquisite10Submitted over 1 year ago

  

  Newsletter signup using flex box

  1

  20
  

  maym42•370

  @maym42Posted over 1 year ago

  you can do this change...

  body
  {
      background-color: hsl(235, 18%, 26%);
      /*flex*/
      display: flex;
      justify-content: center;
      align-items: center;
      /*size*/
      height: 100vh;
  }
  
  .container {
      /* min-width: 46%; need to Delete!*/
      /* max-width: 768px; need to Delete!*/
      /* height: 61vh; need to Delete!*/
      background-color: white;
      border-radius: 20px;
      /* position: relative; need to Delete!*/
      /* top: 20vh; need to Delete!*/
      /* left: 60vh; need to Delete!*/
      /*flex*/
      display: flex;
      justify-content: space-around;
      align-items: center;
      /*space*/
      padding: 1em;
  }
  

  0
• 

  payalpagaria•70

  @payalpagariaSubmitted over 2 years ago

  

  QR code component using basic css

  1

  20
  

  maym42•370

  @maym42Posted over 2 years ago

  You did a good job!😊😊😊

  But in order to make the right position (center the card in the screen), You have to use css grid (display:flex in the body) and not with position: absolute like you did in the container class. So your css should look like this:

  body {
      background-color: hsl(212, 45%, 89%);
      text-align: center;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-family: 'Outfit', sans-serif;
  }
  

  .container {
      width: min-content;
      border-radius: 10px;
      background-color: hsl(0, 0%, 100%);
      padding: 1em;
  }
  

  .p1 {
      font-size: 1.5em;
      font-weight: 700;
  }
  

  Hope I helped 😅

  Marked as helpful

  1
• 

  Yuri Cipriano Cruz•150

  @yuuricrzSubmitted over 2 years ago

  

  QR Code | HTML - CSS

  2

  50
  

  maym42•370

  @maym42Posted over 2 years ago

  Hi Yuri,

  You did a good gob 🙂

  But I have some tips for you:

  In order to center the card in the screen. add to the body this css code.

  body{ background-color: var(--cor2); display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; font-size: 15px; }

  And remove the margin ,height and the width form .prin{} so class .prin look like this:

  .prin { background-color: white; background-repeat: no-repeat; text-align: center; border-radius: 25px; }

  In addition it a good practice to use em units instead of px. In the body you have to define one time text-size in px ,and after that all the other things you defined with relative units like em.

  Hope I helped 😅

  Marked as helpful

  0
• 

  Lucas Tran•20

  @Lucas760Submitted over 2 years ago

  

  Using bootstrap: grid, animation

  #accessibility#bootstrap#animation

  2

  40
  

  maym42•370

  @maym42Posted over 2 years ago

  When I want to make the text responsive, I define the text in the body with "px" units ,according to the size written in the style guide file. And in all other places(class ,elements...) I define the text size in "em" units (Relative to the font-size of the element, so 1em = current font you define in px in the body).

  for example:

  • for regular text define 1em
  • for big text like title define 1.5 em
  • for small text define 0.75 em

  When you use @media for mobile screen just change the font size of the body to smaller size in "px"
  and as a result all other elements with "em" units will effects form that automatically.

  hope I helped you 😄

  Marked as helpful

  0
• 

  Kristiyan•80

  @kristishhSubmitted over 3 years ago

  

  Article preview

  1

  10
  

  maym42•370

  @maym42Posted over 3 years ago

  Hi, I also solved this challenge. You can look at my solution and maybe it will help you :)

  My solution

  0
• 

  Brotli•90

  @BrotliSubmitted over 3 years ago

  

  Stats Preview Card

  3

  11
  

  maym42•370

  @maym42Posted over 3 years ago

  To make a mobile-friendly design use @media in your css file.

  Example @media

  Marked as helpful

  1