Design comparison
Solution retrospective
This is my first challenge and it is a fairly simple one. I'm not convinced that I have gone about it the right way but, having written the code for it yesterday, I came back to it this morning and completely changed my code to make it much more simple. A good thing, I think.
I would appreciate any and all feedback on it. To be honest getting it into github, on to netlify and on to here have proven to be more difficult than writing the code was! I guess I will get used to how to do that properly.
Community feedback
- @Bader-IdrisPosted over 1 year ago
You can set the container in the middle of the screen whatever user changes it when you add these properties to it in CSS:
.container { display: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); }
the new feature is transform, it has many lovely properties you can discover, I personally love it. Hope it's useful
Marked as helpful0@skopelosbillPosted over 1 year agoHi @Bader-Idris, thanks for the helpful comment. I am going to try this later on and I will see what effect it has. But let me theorise…. The
top:50%;
andleft:50%;
respectively move the whole container such that the top left hand corner is in the center of the screen (whatever size of screen) and then thetransform: translate(-50%, -50%);
moves the container up and left 50% of the container dimensions, thus placing the central point of the container on the central point of the screen. If I have got this right, that is something I hadn’t understood about transform before now and is fantastically useful to me and probably to several other newbies on the site.Thanks so much mate.
Skopelosbill
Much later... It did work and it did turn out to do what I thought it would. However it also had unexpected consequences, not least of which was it moved the attribution to the top of the site. I really don't understand how that happened, also in order to get everything working properly (with the exception of the attribution) I had to make other changes which altered my padding. In the end I got to the stage where I couldn't figure out how to fix what I had done so I will leave it as it is now and perhaps come back to it at a future date when I have gained more experience. Thank you for your help, I do appreciate it and am sure I will be using those 4 lines of code again!
By the way... isn't supposed to be
position: absolute;
rather thandisplay: absolute;
?1@Bader-IdrisPosted over 1 year ago@skopelosbill yes it is
position
notdisplay
, my bad! if you have problems with padding and border not being counted when working with elements, you can add this propertybox-sizing: border-box;
to*
representing to all HTML elements, it amends the problems making it count border and padding in elements themselvesMarked as helpful0 - @ivargasmPosted over 1 year ago
Good job
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