Design comparison
Solution retrospective
Please let me know anything, you think that can be optimized to make it more responsive or better in general, still very new to this!
Community feedback
- @eddybproPosted over 1 year ago
Hi, moritzrose
Congratulation on finishing this challenge, I hope it was fun.
For the code, You did a nice job but still need some improvements mostly in
CSS
:- CSS code:
@media only screen and (max-width: 375px){ .container { /*remove ''margin-left'' and ''margin right'' properties*/ } .container div{ /*change the "padding" values to (25px=1.56rem)*/ /*add "padding-bottom" property*/ padding-bottom:1.56rem; /*remove the "height" and "position" properties*/ } button{ /*remove the "position" property*/ } } @media only screen and (min-width: 376px) and (max-width: 1440px){ .container { /* remove the "height" property */ /* remove this : align-content: center; */ /*add this */ justify-content: center; } .container div{ /*update this*/ padding:1.56rem; } button{ /*remove "position" property*/ } }
Tips
-
Remember in most cases you don't have to use the
height
property in containers likediv
ormain
..., instead you can usemin-height
, Which makes your site displays well in small screen sizes. -
Use relative units
rem em
instead of absolute unitspx
. -
Make use of
HTML
semantic tags:header
,main
,footer
. -
I recommend you start using classes and, or pseudo-elements: example:
-
- In the
button
you can use a class like that:<button class="btn"><button>
- In the
-
- Here is how to use pseudo-element:
.container > div{}
Using classes and pseudo-elements makes your styles display faster.
That's it HAPPY CODING
1@moritzrosePosted over 1 year agoThe position: absolute for the button was to have it displayed at the bottom of the container. I experimented and the only way for me to get it there was to use position absolut. How else? Cause now it just sits right under the p element. Removing the height, makes the container just as high as it needs to be to fit in all the elements, but I want it stretched out a bit more. How would you do that? And when I say stretched out, I mean certain distances/gaps where I want them to be, not just stretched out in general. The rest of the feedback is absolutely fantastic :) I changed everything. @eddybpro
0@eddybproPosted over 1 year agoHello, @moritzrose
Happy to hear that from you.
For the question,Sorry I did not answer earlier, If I get it right you can use the
margin
property like that:button{ margin-top: your value; margin-right: your value; margin-bottom: your value; margin-left: your value; /*here a shorthand */ margin: your values; }
GOOD LUCK
0 - @kientq111Posted over 1 year ago
I cannot see any styling in your site, pls check it. Using
<link rel="stylesheet" href="./style.css">
instead of<link rel="stylesheet" href="style.css">
0@jacek83000Posted over 1 year ago@moritzrose I also can't see styling on your site, but only with the exact width of 375px and with any width > 1440px. I also see in your css, that you created mobile design for width < 375px and desktop design for width between 376px and 1440px. Better approach would be to create mobile design also for width higher than 375px (ending at around 1000px for example).
To fix this problem for now:
@media only screen and (min-width: 1200px){ ... } @media only screen and (max-width: 1200px){ ... }
In Chrome dev tools you can check how your page looks on many devices, if you don't know this already: https://developer.chrome.com/docs/devtools/device-mode/#viewport
0@moritzrosePosted over 1 year agoI did not know the website! Thank you! Also, I don't really understand the different widths on different devices yet. If I just type <1200 or >1200, doesn't include multiple devices that need different types? Since most of the beginner problems on fronendmentor suggest 375px device and 1440px device, I just chose those. For me, I only see tons of different devices with many different widths...its confusing :D @jacek83000
0@jacek83000Posted over 1 year ago@moritzrose
You have to make a website where at width of 375px it will look like a mobile design in assets and at 1440px it will look like desktop design. It doesn't tell you what your page needs to look like at e.g. 1000px, however these challanges are also about responsive web design, so it would be nice if nothing unexpected would happen in between 375px and 1440px.
Anyway, congratulation on completing this challenge!
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