Submitted 4 months ago

Just Used CSS Flexbox

CodeWarlock•20

@Bytehax21

A solution to the QR code component challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

Making projects using Figma is way easier and faster than eyeballing the design stuff. I think i made it pretty close to original so no doubts on my work as of now.

What challenges did you encounter, and how did you overcome them?

I faced issues with applying CSS on Child elements like p tags as assigning ID to them and then writing CSS didn't work on them so, I did a workaround by assigning the child a class and then using css and the padding was different than mentioned in Figma design file

What specific areas of your project would you like help with?

Is my CSS good enough or how can i improve it like in applying padding margins and where to assign class or ID etc.

Code

Please log in to post a comment

Community feedback

P
Jonatan Samuelsson•540
@jonatan-samuelsson
Posted 4 months ago
Hey.

Looks good, well done. One thing I noticed is you're using padding-top to position the card. Another way to do it where it gets centered on the page no matter what is to give your main something like:
```
display: flex;
justify-content: center;
align-items: center;
min-height: 100svh;
```
For your issue with child p-elements, there are multiple solutions. First of all, i'd say that the first paragraph semantically should be a heading (say h2, h3 or such).

If you still wanna keep it as paragraphs, you can either do the id thing like so:
```
.text #para-1 {
 ...
} 
.text #para-2 {
...
}
```
...or, you could go for child selectors:
```
.text > p:first-child {...}
.text > p:nth-child(2) {...}
...
.text > p:last-child {...}
```
Finally, all of this can be nested to make the css more structured:
```
.text {
 (some styles for text perhaps)
 p:nth-child(x) {
  (some style)
 }
 p:nth-child(x) {
  (some other style)
 }
}
```
Marked as helpful
morski13•100
@morski13
Posted 4 months ago
You could've maybe went with a larger height of the body so the element can be in the same place as the solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord