Hi @lynaIFR,
Looking at the HTML, I noticed you are styling elements using IDs ( # ). This is not ideal.
IDs have a higher specificity compared to classes. This can make it harder to override styles later, as you would need to use even more specific selectors.
IDs are often used in JavaScript for element selection and manipulation.
Classes are reusable across multiple elements, whereas an ID is supposed to be unique within a document.
Using height: 100vh on .container might not be the best approach.
It is best to set height of html and body tag:
html,
body {
height: 100%;
}
The .container class is intended to wrap your main content, centering it both vertically and/or horizontally within the viewport. Here’s an example of how to use it correctly ( based on mobile first approach).
.container {
max-width: 90%;
margin-inline: auto;
}
@media only screen and (min-width: 425px) {
.container {
max-width: 100%;
margin-inline: unset;
}
}
<body>
<main class="container">
<article class="article">crazy content</article>
</main>
</body>
At the moment there are no media queries to handle different screen sizes, which makes the design less adaptable to various devices.
Project looks good on desktop size but that cannot be said about mobile versions - view images
You should consider a "mobile-first" approach. You can also check out my project on article cards where I implemented this approach.
Have a look at Kevin Powell's responsive web design video: youtube
Overall great job, keep it up.
