Responsive QR-Code-Component using HTML5 and CSS flexbox

Community feedback

• 

  MikDra1•6,960

  @MikDra1Posted 2 months ago

  I encourage you to use this technique to make the card responsive with ease:

  .card {
  width: 90%;
  max-width: 600px;
  }
  

  On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 600px it will lock with this size.

  Also to put the card in the center I advise you to use this code snippet:

  .container {
  display: grid;
  place-items: center;
  }
  

  Hope you found this comment helpful 💗💗💗

  Good job and keep going 😁😊😉

  Marked as helpful

  0

  ---

  

  Shikur•20

  @shikurassefaPosted 2 months ago

  @MikDra1 thankyou a lot.so you are saying that no need of to use a media query simply i can use width and max-width,righ?

  0
• 

  P

  Teodor Jenkler•3,760

  @TedJenklerPosted 2 months ago

  Hi @shikurassefa,

  Nice project! I noticed a couple of areas for improvement:

  Semantic HTML: Consider adding a <main> tag to improve SEO and accessibility. You also don’t need more than one container—using display: flex with a column direction can simplify your layout and make your code cleaner by reducing unnecessary nesting. Always aim to avoid excess <div> elements when possible.

  Headings Usage: It’s important to use heading tags for their semantic purpose, not just for styling. For example, <h1> is reserved for the page title and should only be used once, while <h2> would be the correct heading tag for this project.

  Keep up the great work!

  Best, Teodor

  0

  ---

  

  Shikur•20

  @shikurassefaPosted 10 days ago

  hi @TedJenkler first thankyou a lot for your suggestion

  1. add a <main>....if you look the code closely i was tried to add a main tag i think it is enough to add one main block,right? 2.as you said...'no need more than one container......' i got it very crucial bc simplicity is a key and minimizing a bugs 3 heading usage ...so shall i use h2 for this project...

  0
• 

  RajanCP•90

  @RajanCPPosted 2 months ago

  Need to spent some time reading on 'display flex' and how to make sure your main block is appropriately aligned in the centre.

  0

  ---

  

  Shikur•20

  @shikurassefaPosted 2 months ago

  @RajanCP

  the content of the child is aligned relative to the parent based on your preference.

  0

  

  RajanCP•90

  @RajanCPPosted 2 months ago

  @shikurassefa Yes but we are trying to get the content centred like the example given.

  0

  

  Shikur•20

  @shikurassefaPosted 10 days ago

  hi @RajanCP you mean the card is not centered like the example? actually from the recommendation of my friend @MikDra1,i used a grid concept....

  0
• 

  akoaltynbekova•140

  @akoaltynbekovaPosted 2 months ago

  я рада что нашла такой оглайн ментор, было очень удобно и понятно

  0

  ---

  

  Shikur•20

  @shikurassefaPosted 2 months ago

  @akoaltynbekova thankyou...do you have any suggestion about my project

  0