Review on login form and problems
Hello guys, sorry to disturb you all; I'm trying to build a login form (see the picture with the instagram logo). The other uploaded pictures is how far I was able to go :c . I wanted some feedbacks, what is wrong and what can be improved... I have some questions also:
On the img tag, we add the following:
But the above questions arise.
Last thing, why on codepen, my login form isn't same as if I'm browsing the page in another tab? This is where responsiveness comes into play ? But I have use grid with columns set to 1 fr 1fr, so I don't understand why the column with the image has a smaller column size.
Here is my codepen:
https://codepen.io/Fakeur/pen/YzmmqJq
20 Replies
width: 100%; /* why if I remove the width of 100%, the image takes the full container causing overflow */If you don't define a width (or aspect ratio) for the image it will use it's natural width, regardless of it's parents width.
height: 100%; /* Need to use it so that image take full height, why? */Presumably because you want it to take up 100% of the parent element height, otherwise the image will use its natural aspect ratio which might make it shorter (or taller) than the parent.
aspect-ratio: 16 / 9; /* Is it necessary to use aspect ratio? Is it good practice to use it every time we use images? I know that aspect ratio preserve the dimensions of the image */No, it is not necessary. In fact in this case it would conflict with your height 100% property definition. You should not use it every time you use images. The aspect ratio is used if you want the element (any element, not just images) to have a specific aspect ratio. Aspect ratio does not preserve the dimensions of the image, rather quite the opposite, it forces the image to have that aspect ratio.
object-fit: cover; /* why cover here doesn't take full height? */
object-fit: cover does not define the height (or width), it ensures that the image maintains it's aspect ratio and therefore doesn't get distorted.
This may mean that the image is cropped vertically or horizontally depending on the actual dimensions of the image and those of the parent element.
Note - this is different to the backround-size: cover which is sometimes used for background images. In this case "cover" does ensure that the image covers the complete background image.
display: block; /* Is it important here to set display as block? I know setting display as block on images doesn't leave any "blank" pixels */You only need to set this when you want the image to be a block element rather than an inline element. As you have given the image the height of it's parent, it probably isn't needed here.
Last thing, why on codepen, my login form isn't same as if I'm browsing the page in another tab? This is where responsiveness comes into play ? But I have use grid with columns set to 1 fr 1fr, so I don't understand why the column with the image has a smaller column size.You have a few issues with your CSS but the first thing that is causing the columns to not have equal widths is the large amount of inline padding that you have on the buttons container: 10 rem is a lot and this is a fixed amount so the element can't get any narrower than 20rem + the element contents. For this element I would probably leave it at
1rem and give the child element a width: fit-content; and align it in the middle.
Once you have done this, your next limiting factor will be the form fields themselves as they have a minimum width by default.
On smaller viewport widths I would probably either remove the image completely or move it up above (or below) the form.yeah I see, thanks !
yep, the padding was of 10rem was too much, each time I see some spaces, I directly think of adding padding but here there were other ways of doing it, one being center the contents, I will try, thanks !
just an fyi, the correct channel for reviews is #showcase with the "feedback" tag
the choice of colors needs a lot of work, as that gray on purple with white text is very hard to look at
you also should consider using a css reset
yeah sorry, will do that the next time
yeah, it was just for testing purposes, will change that later on
hmm what is a
CSS-reset?a css reset is a bunch of styles that try to normalize how elements behave in all browsers, so you start from a known baseline
yep just read about that, in fact in everything we build we should use css reset?
Then what happens is that colors/margins given by browsers are kind of erased ?
well, about the colors, you shouldn't worry about it at all
about the margins, if the reset deletes all of them, it's a shitty reset and you shouldn't use it
ah there isn't a "general" way of css reset?
I haven't read fully about css reset but will do so shortly
there are plenty of resets
it's hard to pick one
yep I see, will have to dive into that and learn how it works 🥲
it is very very very deep stuff
just a glance then :c
idk if epic is just being sarcastic or not lol but css reset, from my understanding, is nothing but just some css that gets rid of default styling that comes with a lot of elements
like, header tags come with bigger font size which may not be suitable for your need so in a css reset you'd see all header tags font sizes are set to normal size. or for example p tags come with some default margin, in css reset you'd see something like
a tags make text have blue color and underline, which most of the time u won't be using as it looks boring or doesn't go with the rest of the design so in a css reset you'd see something like
so essentially css reset is just a faster way of getting rid of a lot of the default styling. which is something you more often than not find yourself doing anyway
yeah I see, ty !
welcm
that's very hardly a reset
a good reset normalizes everything, to the point of trying to prevent certain bugs on certain browsers
just one simple example of oddities that a css reset may change is that firefox has
opacity: 0.7 set to ::placeholder pseudo-elements, which makes the color look different from the expected
another thing is to set the font to inherit for inputs, because those have a different font by default
https://github.com/twbs/bootstrap/blob/main/scss/_reboot.scss <-- here's an example, from bootstrapIf your layouts are primarily grid or flex where margins don’t collapse , what do you do ? Override each elements default margin manually ? Just remove the block-end margin ? Or …?
there aren't that many elements with margins that are used for layouts
I'm referring to the elements inside grid or flex container. Your headings snd Paragraphs and lists have default margins that won't collapse
that varies a lot
but i have the choice to remove all margings and use the lobotomized owl selector to put them all the way i want
the reset doesn't do that for me for all elements