QR component using CSS and responsive design

@andredomin congrats on delivering your first project here!!

Great start and if you would like to finish next project better try:

1. Review materials on box-model

You're have such a pain with margins/paddings etc., because your component doesn't have a proper fundamentals.

Try to focus on: a) set a body on 100vh (100 viewport height = 100% of screen height, no matter if mobile or desktop)

and display elements inside of a body as flex: display: flex; flex-direction: column; (in this case no matter what you set - you'll have 1 container in the body) align-items: center; justify-content: center;

now you have fundations for the your component (it will be in the perfect center)

b) create container with proper width and height (invicible box for rest of a content) f.e.:

display content in this container with proper values, for example: display: flex; flex-direction: column; (this is important in your case: every item will be below previous) align-items: flex-start; justify-content: space-around (you'll have almost everything done in your "invincible box")

c) You can add a small padding for the copy if you want a pixel perfect delivery. And you're a one step closer to deliver next project a bit better :)

1. Create components/webistes from the ground up. start with mobile and just add in bigger resolutions (@media) changes.

This way you avoid situation that a @media query for smaller resolution overrites many lines of code.

You can check code for this component of mine: site: https://kkulek.github.io/simple-nft-preview-card-component/ code: https://github.com/kkulek/simple-nft-preview-card-component

Maybe this will help you a bit.

PS. If you review informations about box model and basic flex, you start setting up projects with proper fundamentals - with them you will not have to hustle so much with margins ;)

@andredomin: idk what happened with the formatting, but I hope that comment help you a bit.

As a suplement I'm reposting part of my other comment. I believe it could realy help you (it improved my understanding of basic concept within a 1-2 days).

PS. I've started 6 days ago here... this materials and focus on the fundamentals (i hope!) could help you improve fast :)

Repost: Maybe these 4-videos series would be good fit for you: https://www.youtube.com/watch?v=h3bTwCqX4ns

Kevin is doing a challenge from the frontendmentor.

Key takeaways: Setting a good :root (especially fonts and theirs corelation across resolutions) will save tons of a time - without that I was creating hudge mess in the CSS while working on @media queries.

Pixels aren't best idea when you want to work on the responsive project. Relatives are just better fit (here is few minutes about that topic: https://www.youtube.com/watch?v=_-aDOAMmDHI)

It's an obvious thing now, but wasn't before for me. Work on the project from the ground up: from the smallest resolution and add @media queries when needed.

Plan whole project in advance (all the boxes/containers, relation between resolutions etc.). 10-20 minutes on that saved me 1-3 hours on the other project, and I think it's a great practice even on small projects, to just be prepared for the bigger ones.

BEM (naming structure for the CSS): I'm still learning that (and making my mistakes), but use this or similar methodology to train and organize your CSS.

Good luck :)

Greeting Andrés Domínguez!! Congratulations on completing Your First challenge!, 👏👏👏.

the negative margin itself has a use cases nothing wrong about using negative margins, However to control the layout it better to use either Flex or Grid, and avoid using hard coded width and height, use instead max-width or max-height if needed, for example if have a container that you want to center it on the page you can do something like .

  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

or

 min-height: 100vh;
  display: grid;
  place-content: center;

and use margin and padding to control the box-model itself not the layout .

but over all, Happy Codding, and welcome to Frontend Mentor Community

Nice work here. I believe you could make use of text-align: center; for your paragraphs. You could as well put in your content in a div or main(whichever you would like). After, setting your padding, say padding: 10px, you could set images to width: 100%

I think with these, you won't need to set margins like you did. Also, you could do well with just one stylesheet. Happy coding 😇