QR Code Component built with HTML & CSS

Community feedback

• 

  S.R.T•10

  @CoolCoder24Posted over 1 year ago

  I really appreciate the help @Olarra18! Thank you so much!

  0
• 

  Holo Olagoke•50

  @Olarra18Posted over 1 year ago

  Hi @CoolCoder24 I am also a beginner. Looking through your code at my own understanding I think you have code it at the best way but you did not create a responsive layout for mobile device view

  0

  ---

  

  S.R.T•10

  @CoolCoder24Posted over 1 year ago

  Hey! @Olarra18 Thanks for the feedback... I was wondering on how to make it responsive? I presume you need to use bootstrap to be able to accomplish it but I wasn't sure...

  0

  

  Holo Olagoke•50

  @Olarra18Posted over 1 year ago

  @CoolCoder24 here is the CSS I used to create my own responsive layout

  /*Mobile view*/
  @media screen and (max-width: 767px){
  /*will create 5% space around the object from outside (at my own understanding on margin) or you can use margin-top: 5%; to only apply the space at the top because the reason of the margin to drag the object down away from the top edge*/
  body {
  margin: 5%; 
  }
  
  /*general container that hold both the image and the text below it*/
  /*the html body total height is 100vh=100%, so this container is taking 75vh=75% out of the 100vh=100%*/
  .container {
  max-height: 75vh;
  max-width: 65vw;
  }
  
  /*The top box that contain the image only*/
  /*The image is using a permanent fixed height which is 300px, while the width is 100% length responsive to the device width (I think that is the best thing to use for responsive layout)*/
  .img-box {
  height: 300px;
  width: 100%;
  }
  
  /*The bottom box that contain the text only*/
  /*The box is using a permanent fixed height which is 300px*/
  .txt-box {
  height: 300px;
  }
  }
  
  /*Desktop & Tablet view*/
  @media screen and (min-width: 768px) {
  
  /*will create 5% space around the object from outside (at my own understanding on margin) or you can use margin-top: 5%; to only apply the space at the top because the reason of the margin to drag the object down away from the top edge*/
  body {
  margin: 5%;
  }
  
  /*general container that hold both the image and the text below it*/
  /*the html body total height is 100vh=100%, so this container is using exact 100vh=100%*/
  .container {
  max-height: 100vh;
  max-width: 30vw;
  }
  
  /*The top box that contain the image only*/
  /*The image is using 45vh=45% out of 100vh=100% (it parent "container"), while the width is 25vw=25%*/
  .img-box {
  height: 45vh;
  width:25vw;
  }
  
  /*The bottom box that contain the text only*/
  /*The box is using30vh=30% out of 100vh=100% (it parent "container")*/
  .txt-box {
  height: 30vh;
  }
  }
  

  You can set the body CSS as

  body{
  background-color: hsl(212, 45%, 89%);
  max-height: 100vh;  /*limit the total height to 100vh=100%
  display: flex; /*make the object float*/
  flex-direction: column; /*make the object boxes in one line downward*/
  align-items: center; /*place the object at the center of the document (since it parent is the html element) but at the top*/
  justify-content: center; /*place the object at the middle of the document (since it parent is the html element) but it does not work as expected that is why I support it the margin attribute*/
  }
  

  .container {
  display: flex;  /*make the object float*/
  flex-direction: column; /*make the object boxes in one line downward*/
  align-items: center; /*place the object at the center of the document (since it parent is the html element) but at the top*/
  justify-content: center; /*place the object at the middle of the document (since it parent is the html element) but it does not work as expected that is why I support it the margin attribute*/
  border-radius: 20px; /*curve the edge of the object*/
  background-color: hsl(0, 0%, 100%);
  }
  
  .img {
  margin: auto; /*place the image at the center of it parent*/
  border-radius: 20px; /*curve the edge of the object*/
  width: 100%; /*use 100% of it parent height "img-box"*/
  height: 100%; /*use 100% of it parent width "img-box"*/
  }
  You can also request help from expert from the house
  

  0