Responsive QR-code component using HTML, CSS and Flexbox

Community feedback

• 

  Michele•30

  @XbiteX

  Posted 7 months ago

  it looks almost the same but you should refactor it: use classes instead of ids, you almost never target an element with its class, many atrributes could have been merged into a more general class/tag selector:

  #first-span {
    display: inline-block;
    font-weight: 700;
    font-size: larger;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
  }
  
  #second-span {
    display: inline-block;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
    font-size: 15px;
    opacity: 50%;
  }
  

  i would define common attributes such us margin in a general span tag, then there are more effective way to declare margins:

  .class-selector{
      margin:0 20px 20px 20px;
  }
  

  it is equal to write .class-selector{ margin-left: 20px; margin-right: 20px; margin-bottom: 20px; }

  
  btw i wouldn' use margin but padding or the gap attribute of the "your flexible card".
  overall: it seems good on the rendered page but i belive that if you even move a tag you end up with a mess but maybe that's all an impression of mine, see others feedback.
  there are many little things that i personally don't like
  

  10

  Marked as helpful