Hello there, Congratulations on completing this project
There are some best practices that you should consider while creating responsiveness in your website.
- Mobile-First Approach: Start your design with mobile screen in mind and then scale up for larger devices
- Use Media Queries: Media queries allow you to define different breakpoints for your website, helping you specify different CSS properties based on the size of the user’s screen
- Relative Units: Try to use relative units like ‘vh’, ‘vw’, and ‘%’ instead of fixed pixels. This ensures that elements resize components according to the screen size
- CSS Flexbox or Grid: These are modern CSS features that can be used for creating responsive layouts. They make planning website layouts easy
You can learn responsive design in detail from here W3School or Introduction To Responsive Web Design - HTML & CSS Tutorial
Now regarding sizing the image in your code max-width: -webkit-fill-available property you used is a WebKit-specific property that might not work in all browsers. You can instead use max-width: 100% and height: auto for your images. This makes the image responsive and scales it down if necessary, but never scales it up to be larger than its original size.
You can modify your .qr class like this:
.qr {
border-radius: 20px;
max-width: 100%;
height: auto;
}
Also consider using semantic HTML tags like <main></main>, <section></section> and others that you can find in this link. The main tag should hold the main content of the page and you can divide the content into sections.
The semantic HTML tags help the search engines and other user devices to determine the importance and context of web pages. The pages made with semantic elements are much easier to read and offers a better user experience. It has greater accessibility. Using div when there's a better alternative is not a good practice as div hold no semantic value.
I hope this feedback is helpful
Other than that good job!
