For the qr-code-content container class, i had set a max-width: 550px so that the container class wrapping the h1 & span elements are within the width of the QR code image.
I'm sure this isn't the right way to do this.
Is there a programmatic way or "best practice" way so that the qr-code-content container will be as wide as the QR code image or whatever image that is placed there?
Your component is way to big when I tried to load it up on my phone, that can be fixed with a media query so on a desktop it takes the 500px you set and on the mobile device it takes up 80-90% of the screen size.
@media screen and (screen width goes here) {
*your class goes here *
}
I just checked out your website using my phone and it wasn’t rendering right. You need to work on your responsiveness. I always recommend frameworks for things like that
I have a question, I am about a week into learning front-end web dev. When I go from mobile to desktop the difference is quite big. Not only that I wrote over 150 lines of CSS but I feel this can be achieved in a much smaller amount of time. If anyone has any suggestions that would be greatly appreciated. I know the desktop is not done but I thought there would be a greater success with some help from others.
to solve the responsiveness issue you are facing, i will advice that you learn how to use a css framework like bootstrap or tailwind. They help you out in making your website responsive and also help reduce the time you spend in creating your own version of things.
Yes, you can achieve the result with a short line of css, you just have to combine alot of codes you used multiple times into one handler
