responsive barcode using appropriate div elements and css properties

Community feedback

• 

  Raphael Bröderbauer•790

  @DigitaleWeltLibraryPosted about 1 year ago

  Hey, good solution.

  Some improvements:

  • give the body tag a height of 100dvh (is the whole screen height)
  • give the img tag a width of 100% to cover the entire width
  • your last p tag is no longer on the card (.barcode-container). Either you remove the height or you give it the value min-content

  The improved CSS:

  body{
     height: 100dvh;
  }
  
  img{
      width: 100%;
  }
  
  .barcode-container{
     height: min-content;
  
     /* use this to have a border in the phone view */
     width: min(300px, 90dvw - 40px);
     /* or */
     box-sizing: border-box;
  }
  

  Happy Coding 😉

  Marked as helpful

  0

  ---

  

  Ayodeledavid123•100

  @Ayodeledavid123Posted 12 months ago

  noted, thank you@DigitaleWeltLibrary

  0