QR Code Component Using HTML5 And SCSS

Community feedback

• 

  P

  Dave•5,295

  @dwhensonPosted over 2 years ago

  hey @shamilussainc page looks great - nice job.

  Not wanting to start a fight, but I would not necessarily replace your section with a main tag. If this were a entire webpage then yes, but as it really just represents what would likely be one component on a webpage it probably isn't needed... but this stuff is a bit subjective... anyway in response to your question:

  There are many ways to position a component like this in the centre, but I set a grid on the body element (don't worry even if you haven't used grid this is very simple), with three columns, as using a class selector as follows:

  .center-content {
  	display: grid;
  	grid-template-columns: minmax(1rem, 1fr) minmax(375px, 1440px)minmax(1rem, 1fr);
  }
  
  .center-content > *  {
  	grid-column: 2;
  }
  

  The 1440px is the max-width you want the main content to be, and the 1rem values is the smallest spacing you want either side of the main content on small screens (I sometimes put this to 0 and use a container to add padding to each section).

  The second part positions all direct children of the body in this nicely sized middle column. In the case of a full webpage, this would include, a header, main, and footer the middle column, and stops them going wider than 1440px.

  In this case with just a single component you could just set display: grid on the body, along with place-items:center, and that would do it. Your solution is basically the same as this with a line of extra code, so stick with that if you are happy!

  Other people use container classes to do the same thing. This article has a good run down of alternative approaches to dealing with this issue: https://css-tricks.com/the-inside-problem/ You will note I am actually using the approach the author doesn't like!

  Either way it's a good idea to find an approach that works for you as you'll need this for a lot of FEM challenges.

  Hope this helps!

  Keep up the good work!

  Cheers 👋

  Dave

  Marked as helpful

  1

  ---

  

  Shamil ussain c•70

  @shamilussaincPosted over 2 years ago

  @dwhenson Hey Dave, thank you so much for your feedback . After reading your feedback i started to learn more about Grid layout. And it seems so powerful. it gives me opportunity to develop more awesome websites.

  In above solution you have specified way to center horizontally. but for centering vertically we have to specify a height, right ?

  thanks again😊

  0
• 

  Rio Cantre•9,690

  @RioCantrePosted over 2 years ago

  Hello there! Awesome work with this project. Looking at your solution, I would like to suggest the following for you…

  • Instead of wrapping the whole content with section consider using main tag. For HTML structures, refer it with this one Semantics

  Above all, the design is well implemented. Keep it up and Hope this is helpful!

  Marked as helpful

  1

  ---

  

  Shamil ussain c•70

  @shamilussaincPosted over 2 years ago

  @RioCantre Hey, thank you for your feedback. i haven't think about the importance of semantics before. your feedback gives me insights to Semantics. i will learn more about it and improve my solutions.

  1