QR Code using Semantic HTML and CSS properities

Community feedback

• 

  Ahmed Bayoumi•6,680

  @Bayoumi-dev

  Posted about 3 years ago

  Hey Christine, It looks good!...

  My suggestions:

  • Instead give each element padding: 15px; to align all at the same level, Give the container that contains all elements padding: 15px;.

  • Use REM for font size, It is a must for accessibility because px in some browsers doesn't resize when the browser settings are changed.

  See this article ---> CSS REM – What is REM in CSS?

  .card {
    width: 320px;  /* Chenged */
    height: 500px;
    background-color: var(--White);
    border-radius: 20px;
  
    padding: 15px;   /* <---- Add */
  }
  .card .image img {
    width: 100%;   /* Chenged */
    height: 288px;  /* Chenged */
    border-radius: 10px;   /* Chenged */
    /* padding: 15px;      <---- Remove */
  }
  .card .text {
    font-family: "Work Sans", sans-serif;
    text-align: center;
    /* padding: 0px, 30px, 20px, 30px;     <---- Remove */
  
    margin-top: 24px;   /* <---- Add */
  }
  .card .text h1 {
    /* font-size: 18px;      <---- Remove */
  
    font-size: 1.47rem;    /* <---- Add */
    font-weight: 700;
    line-height: 1.4;
  }
  
  

  Hope this is helpful to you... Keep coding👍

  00

  Marked as helpful
• 

  MioMauro•400

  @MioMauro

  Posted about 3 years ago

  Basically it is like this - * {margin: 0; padding: 0; box-sizing: border-box;}. Before writing the code you should help yourself with a graphics program, to see the dimensions and some spaces, I use Inkscape (free). For fonts, padding, marging it is best to use the units rem or em

  00

  Marked as helpful