Design comparison
Community feedback
- @MelvinAguilarPosted almost 2 years ago
Hello there π. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
-
Some styles, such as
width: 100%;
andposition: absolute;
in the.container
selector are redundant, do not add any new styles and the component remains the same if you delete them. -
I have an issue with your component on mobile devices in landscape orientation, it is not displayed completely and is cut off, the problematic styles are using
overflow: hidden;
in the.post
selector along withheight: 100vh
, on a mobile device in landscape orientation your solution is cut off.screenshot-imgur (landscape mode)πΈ
Use
min-height: 100vh
instead ofheight
and removeoverflow: hidden;
.
I hope you find it useful! π
Happy coding!
Marked as helpful0 -
- @jrleijnsePosted almost 2 years ago
Hey there! Great job completing your first challenge! π
I have some suggestions for your code that might interest you.
HTML π:
- Instead of using the
<div>
tag for your containers, try using some semantic HTML to provide more meaning to it, for better SEO. For example, instead of using<div>
you could use the<main>
or<section>
tag. For the element with the classname attribution you could use the<footer>
tag. - If an
<img>
like in this case the QR-code, leads to a website or links to someplace else, try to provide a more descriptive text of that in yourALT
text, for example: QR code that leads to frontendmentor.io
CSS π¨:
-
For a better file structure (especially when you start building bigger and bigger projects), place your CSS code in a separate file (for example: style.css) and move the code located within the
<link>
tag and placing it inside of your<head>
tag in your HTML. For example: <link rel="stylesheet" href="./style.css"/>. -
To make your solution responsive for different devices and screen widths, you can create a media query inside your CSS file and set the breaking point (i.e. the moment your media query gets triggered based on the width of the viewport). For example:
@media (max-width: 375px) { ***Place your CSS code here, just like you would in a regular CSS file***}
.
For more information on this topic, you can read the following article: Media queries π
I hope you find my suggestions useful, and above all: the solution you provided is very good!
Keep it up and happy coding! π
0 - Instead of using the
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