Submitted over 1 year ago

Responsive 3-column preview card

Dikachi-Scorpio• 30

@Dikachi-Scorpio

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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

Godstime• 330

@iceberg61

Posted 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; }

Daniel 👨‍💻• 980

@Daniel-Bilodid

Posted 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 👍

C H A R A N 🎯• 2,670

@0xabdul

Posted 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

Please log in to post a comment

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