Hello! I want to know if it is best to use the QR image as a block-line image or background image. Also I had some challenges when I was putting the text under the QR. I initially put it the QR into one div and the text into another div and wrapped it around with a container div. I then discovered that it gave me problems later on, like there was a gap in between the divs. So i opted to put both the text And QR into a single Div but wrapped the text in a p tag. I will like to know what is best practice and how I can make my code cleaner. Thanks!!
Gitanshu sankhla
@Gitax18All comments
- @OluwalolopeSubmitted over 1 year ago@Gitax18Posted over 1 year ago
hello Oluwalolope, and congrats on completing the QR code component challenge. I have read your question on what is the best practice to arrange the image, title, and paragraph inside a container.
My solution to this problem is to use Flexbox, you can change your container display to flex and change the flex-direction to the column. this will solve the problem of separating different components into different divs. and in my perspective particularly in this case, putting an image inside an <img/> tag is better than a background-image.
and one more thing rather than using font-size in px used it in rem units, just set the HTML font size to 62.5% so that 1rem will become equal to 1px and this will become easy to calculate font size throughout the project. and rather than using width, use max-width and rather than using height, give the image aspect-ratio of 1 / 1. These tips will make your project more responsive.
Good day, Oluwalolope I hope my feedback will help you.
Marked as helpful0