Design comparison
SolutionDesign
Community feedback
- @Lo-DeckPosted about 2 months ago
Hi well done for this challenge,
I'll give you this link you check out the mistake for HTML and CSS. 3WC validator.
You used too much
div
use more semantic tag likesection
,article
...<div class="main-image"> <img src="image-web-3-desktop.jpg" alt="web3 pic" class="source"> <img src="image-web-3-mobile.jpg" alt="web3 image" class="img"> </div>
You can use picture tag to display different image depending on the size. Here a link : MDN.
<picture> <source media="(max-width: 799px)" srcset="your path" > <source media="(min-width: 800px)" srcset="your path" > <img src="your path" alt="your description" > </picture>
Wrap this in a
ul
withli
:<a href="#home">Home</a> <a href="#new">New</a> <a href="#popular">Popular</a> <a href="#trending">Trending</a> <a href="#categories">Categories</a>
It's better to use
em
orrem
instead ofpx
. FreeCodeCamp. FreeCodeCamp.It's easier to start with a mobile-approach FreeCodeCamp.
And with a big screen your element are not correctly set. Try with the web tool, above 2200px your element are over each other.
Hope to be helpful.
0
Please log in to post a comment
Log in with GitHubJoin 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