The responsive organization with css was the most difficult part of the project, but is a weasome tool to inclusive site for diferents dispositives
Hello, well-done with your development journey. It seems you submitted a screenshot of the links instead. Because that's what I can see
It's a (nearly) pixel perfect solution and I hope it works on your machine as well as mine... Naming modifier classes is difficult for me, I need to work on it. I followed the CSS first design perspective by Jeremy Keith that he explains in the CSS in depth book. I highly recommend this book to improve your CSS skills. I checked some good solutions and I changed my current tags to more semantic way. I know there are a lot of things that can be improved...
Any feedback is welcome, thanks...
Hi Alper. Great work here and well-done. I'd love to know more about the book you recommend. Did you have any link for it? Kindly share
i couldn't figure out how to add the background svg
Hi, this is really cool. As for the background SVG, the step is pretty straight forward.
background-image: url(' link to the svg ');
Note that the link to the svg is a relative one (./images/pattern-background-desktop.svg);background-repeat: repeatx; if you want.CSS Styling
Code Organization and Practices
Hello, I can't find fault in ur html code, where you probably need changes is in your css code. Below are the suggestions I have:
flex-direction: column;. This will make ur card at the center of the page.h1 {font-weight: 700;} and p {font-weight: 400;}card-contents to give space btw the components inside. Such as gap: 20px;I found the styling of the qr code a little bit difficult especially trying to size the image to fit the div elements.
Hi, well-done with the exercise. It's very clean and clear. Concerning the question, you can use max-width: 100% instead of width property on the img tag. This will make the image responsive and fit in the div as you want.
Again, well-done writing clean codes
Hello, I completed this QR Code Challenge. I was having difficulty with the mobile version. There was more space at the top of the page that might cause the users to scroll down a little to get to the actual QR code card. Any constructive feedback on this challenge is welcomed!
Hi, well-done here. Your code is very clear and clean. From what I observed, you work a lot with margin which can create more space. Try any or all following if it'll help:
While some of these might not work for you, it's still good to try them out
The main difficulty I faced while took on this challenge, is the responsivity. That was the part that got me stuck for a while to find out. Some things I wanted to question for a possible feedback:
What "max-width" values do I specifically use while working with responsivity screens? I know there are specific values for it, but I think sometimes those values aren't exactly accurate as I tried to implement in this challenge.
In a overall question, what practices I could do to improve my responsivity knowledge and try to improve on? This is the part that gets me everytime while working in a front-end page, so it's kinda difficult for me, as a "intermediate-beginner" student.
Hey! Kudos on making the design responsive without libraries. Concerning your questions, since you're using flexbox layout, specifying the height for each card class can be strategic. Instead, use the gap: value; property to specify space between elements in the layout and use padding top and bottom to make the container long.
As for the max-width, it's useful when dealing with responsiveness. My suggestion to your code is to wrap all the card class in a div element, then in your css, give the div element a max-width value. Play around the value till you are convenient.
If you have any suggestions on how I can improve my code, I would greatly appreciate it..
I'm not that familiar with tailwind but I think what u need to do in ur code is to add something like overflow: hidden; with some border-radius to the card class so the rounded corners can be effective
This is my first challenge submission. I'm unsure if the way I used widths is correct or if there is a better way. Any feedback is appreciated.
Hey! I checked your code and everything is fine, Just a little change.
Ur qr-image should have the max-width of 100% for it to fit desired container instead of fixed width.
Also, I suggest you use padding in the container instead of specified height. All should be good from there
