The center piece of this challenge is the use of the flex container.
Design comparison
Solution retrospective
Hi...
Any feedback regarding my solution will be well received. Specially regarding the way I chose to do it, order and efficiency. Thanks, cheers!
Community feedback
- @declanslevinPosted almost 5 years ago
Another thing I noticed is that you are using
style
attributes in your HTML - this is considered bad practise as it introduces problems with CSS specificity (I highly recommend you take some time to learn about this if you haven't already! CSS Specificity). Thestyle
attribute will always override any external styling (i.e. from a CSS stylesheet) unless you use the!important
tag in your CSS (which is also considered bad practise). In larger projects this can cause you a lot of headaches and it is best to be avoided. Stick to using class attributes and do all of your styling in a stylesheet :)2@MatiGHPosted almost 5 years ago@declanslevin It crossed my mind this would be the case. Thanks again.
0 - @declanslevinPosted almost 5 years ago
Hi MatiGH,
First off, good job, it looks really slick!
I've noticed you have some issues with responsiveness - try dragging your screen width and watch what happens - the 'modules' get out of alignment between 755px and 1125px. A solution you could try would be to use the Flex property
order
(Flex Order) when between these widths to re-order your divs so that 'Calculator' and 'Supervisor' modules appear in a column together, rather than being split by the div that contains the other modules.Also, you are using fixed values for setting the height/width of the modules - this can negatively affect responsiveness. I would recommend using min/max-height/width or a relative value like a percentage % instead.
One last thing is that you are using
<p>
elements for 'Reliable, efficient delivery Powered by Technology'. The styling on these suggests to me that these are intended as headings, so it would be a good idea to use a<h1>
and<h2>
instead.2@MatiGHPosted almost 5 years ago@declanslevin Wow! i really appreciate the elaborated feedback, it's priceless. I'm totally new to Web Dev, so any guidance is well received. I did notice the responsiveness issues but I wasn't sure how to solved them. THANK you, sir.
0@MatiGHPosted almost 5 years ago@declanslevin Ok, made some refactoring, uploaded the changes to GitHub. Though I still can't figure out how to implement the order property. Regarding the size of the "modules", I used I fixed size cause it seemed to be the size doesns't change no matter the width of the page. What am I missing here?
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