Submitted over 2 years ago

Responsive 3-column preview card

@Dikachi-Scorpio

A solution to the 3-column preview card component challenge

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

Code

Please log in to post a comment

Community feedback

Godstime•330
@iceberg61
Posted over 2 years 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; }
Daniel 👨‍💻•980
@Daniel-Bilodid
Posted over 2 years 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 👍
C H A R A N 🎯•2,670
@0xabdul
Posted over 2 years 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

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