Mobile-first solution using css flexbox

Neat code!

You can use the max-width property to set the maximum width of an element.

The problem with the <main> container and <img> element occurs when the browser window is smaller than the width of the element (320px and 288px respectively). The browser then adds a horizontal scrollbar to the page.

Using max-width instead, will improve the browser's handling of small windows.

For example:

img {
    max-width: 288px; /* or 100% */
    height: auto;
    border-radius: 16px;
}

Hi @MUFTIATBAKARE,

Nice project! Here are a couple of suggestions to enhance it further:

OG Meta Tags: Consider adding Open Graph (OG) meta tags to your site. This will improve SEO and create visually appealing links when shared on social media, which can help increase visibility.

Clickable QR Code: I recommend making the QR code clickable by either wrapping it in a link or providing a small text link. This will make it easier for older users to access the site without having to scan the code.

Keep up the great work!

Best, Teodor

Thank you so much for the feedback. This is really helpful.