Design comparison
Solution retrospective
am new to coding so far I have only been able to learn html and css I made the web page mobile responsive but I do not think my method would work across all devices. I would appreciate it if my work is looked into by the senior developers. Thanks
Community feedback
- @iceberg61Posted over 1 year ago
On your css file. while this๐ works to a certain degree. section{ display: flex; flex-direction: column; align-items: center; }
but in order for section to be positioned at the center. this should work properly. i set height to section because it align-items center won't center๐ until it is giving a height section { display: flex; align-items: center; justify-content: center; height: 100vh; }
0 - @Daniel-BilodidPosted over 1 year ago
Hi, my congratulations you did a great job ๐
๐๐จ๐ฆ๐ ๐ญ๐ข๐ฉ๐ฌ ๐๐จ๐ซ ๐ฒ๐จ๐ฎ๐ซ ๐๐จ๐๐ ๐
๐น About responsive design
You can open a developer console and check if everything is okay, also i recommend you look at this article
๐น You need to put a landmark in your code
simply wrap your code with <main> landmark instead of <section class="main">
๐ The <main> HTML element is intended for the main content (content) of the <body> of the document (page).
I hope it was helpful, you are great, keep up the good work ๐
0 - @0xabdulPosted over 1 year ago
Hello there well congrats on successfully completing the 3-column preview card component
- A Little bit suggestions for improve your code
- IN HTML ๐ :
- LANDMARK ๐
- The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.
- To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements
- Note This Elements are don't sikp
- semantic elements :
<aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect.. - non- semantic elements :
<div> , <span> ect ... - for easy way to clear the Accessibility reports using non semantic elements Ex :
<body> <div class="container" role="main"> /html code goes here : ๐ </div> </body>- Or
- using semantic elements
- Ex :
<header> should be put heading or logo๐ธ </header> <nav> //Links here </nav> <main> Main of the contents ๐ </main> <footer> ยฉcopy right here๐ </footer>- I Hope you find the solution and it's useful for you your Project is Great
- Happy Coding
0
Please log in to post a comment
Log in with GitHub
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