Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Solution using CSS Flexbox

P
Wojtek Brejnakβ€’ 110

@wojtekbrejnak

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I used only rem sizing unit in this project. Page resizing works great on every browser on my Desktop and on mobile Chrome and Firefox browsers but when I am zooming the page on mobile Opera the text is spilling out of the containing box. It looks like text is 'growing' faster than it's container. How to approach problems like this? Is common for mobile Opera to have problems?

Community feedback

Daniel πŸ›Έβ€’ 44,230

@danielmrz-dev

Posted

Hello @wojtekbrejnak!

Your solution looks excelent!

πŸ“Œ Consider this tweak for your HTML code:

  • To improve semantic clarity, opt for <h1> over <div> for your main title.

πŸ“Œ Think of <div> and <span> in HTML like plain boxes or placeholders. They're handy for holding content, but they don't tell us anything about what's inside or what it's meant for on the webpage.

It's more than just text size β€” it's about structuring your content effectively:

  • <h1> to <h6> are used to define HTML headings, with <h1> being the most significant.

While these adjustments might not alter the visual appearance much, they significantly enhance semantic clarity, SEO optimization, and accessibility.

Hope this suggestion proves helpful! Keep up the great work!

Marked as helpful

0

P
Wojtek Brejnakβ€’ 110

@wojtekbrejnak

Posted

Hello @danielmrz-dev,

I sincerely appreciate your thoughtful feedback, and I want to express my gratitude for your tweak suggestion. It’s easy to overlook semantic clarity in small projects, I will remember that it is always important, no matter the project size. As a result, I’ve made the adjustments: I replaced the div .title with an <h1> tag and the div .info text with a <p> tag to enhance the overall structure.

Thank you once again for your input! πŸ™Keep up the great work with helping others!

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord