QR Code Component Using HTML5 And SCSS

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

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!