Position absolute and responsive layouts

[@Username-em1oe]

I just want to say that you are the best educator on CSS. You have given me the ability to understand CSS at a much deeper level. Keep doing what you're doing. It is very much appreciated. Thanks Kevin

[@clevermissfox]

Seconded! Probably more like 70 thousanth-ed

[@daveturnbull7221]

I need to start taking serious notes from your videos. You keep giving us so much info that a lot of it is getting lost in the mess I like to call my brain. Life was so much easier before finding your channel and getting exposed to just how powerfull CSS actually is (not just for setting colours etc). Anyway, I'm off to put in a bulk order for notepads...

[@KevinPowell]

Like Super Mario said, something like Notion might be perfect (it can seem overwhelming because it's so customizable, but there are starter templates for note taking and stuff). It's really handy. I do think written notes are useful too, and I think writing by hand and scribbling out drawings and stuff has a lot of benefits, but being able to quicky reference stuff is always great.

[@outpost31737]

Create a folder on your PC/MAC call it something like 'My Webkit' and add your snippets there for easy reference. Works for me :)

[@cekuhnen]

The nice thing is he comes from print and gets the confusion…

[@ob5804]

​@@KevinPowellKevin, hello. I have a problem with slider's arrows. When arrows are next to each other, but positioned absolutely, along the container, and when the window is narrowed, the arrows move to the center (Can this approach solve that?

[@TheMsWrong]

I used to absolutely dread any time I had to work with position: absolute but you really helped me understand it much better!

[@kirby6362]

Today I realized that, after watching ~100 Kevin Powell videos, his opening is not “Hello my friend and friends”. 😂 I always thought it was so cute and personalized that he would greet me as his friend lol

[@StopLossDill]

Thank you for this. You have helped me more than you could imagine. All my responsiveness-related bugs are instantly fixed after watching this video. This overlapping card concept is so cool. Thanks for years of great content man.

[@iwannabekoshka]

I did not know that you can use "position: absolute" and arrange elements relative to it, always did one more wrapper with "position: relative"... Thank so much, you made my life easier

[@ruthy08]

6:54 - this is the epitome of the meme. "Why does that not work." I love that you left that in.

[@clevermissfox]

I had no idea you could set up your child elements like the name and card number to absolute, and THEN give that parent a positon absolute too. Obvisouly there are specific use cases this would be applied and i try to avoid it but i just assumed if you took off relative from the parent everything would break. This channel is amazing. So generous

[@greentea2430]

Hi, Kevin! Just wanted to say that your style of teaching and explaining stuff is absolutely brilliant, I've been with the channel for 3 months and never missed a single video. It helps me a lot in fighting my anxiety, so thank you very much ; - ). It would be wonderful if you could deep dive into the forms in one of the future videos, particularly into the js side of things. It is always so confusing to get forms nice looking and perfectly working, so yeah.

[@WilledWest]

woooooooww, I just the opened the youtube app on my phone basically to check out tutorials on how people went about working on this card project particularly , not knowing Kevin had worked on it already and has posted it, and I've been on youtube a few times since yesterday, but didn't see this, today that I wanted to search out the problem, kevin's video was the first on my youtube, haven't even searched it already. if this is a sign for me not to give up on coding , I'll think about it. lol, thanks Kev❤

[@leolecee9405]

Just as clear, synthetic and practical, as usual 🤓 And as I'm just tackling my first form / form-validation project, it would be awesome to see your approach to that kind of things. Thanks again for everything you're doing 👌

[@mikefernandez403]

Thank you very much Kevin, I was kind of stuck trying to create a brackground-img for this exercise and you solved all my problems x) I learned so much from your tutorials. Thanks for making people love CSS !

[@rvoitiv]

Learning something new from each of your videos. Though the video itself is about position absolute, that “margin-left:auto” trick was really neat. Thanks Kevin!

[@dre429]

Thank you so much this has helped me a lot with one of my projects and even the small off-topic note was very helpful to me and taught me something. Thank you for such quality teaching!

[@arifulhaque3236]

Thanks a lot sir...can't control myself to thank you for everything in comment section.

[@daniru2505]

Awesome video. I currently have a project requested by my father. I encountered a problem about layouts and your CSS grid tutorial from a year ago helped me. I still have a page to do that will deal with position absolute and this came in clutch.

[@deanlane]

Thanks, Great guide. It's funny, just as I am working on a similar problem on my projects you come along and put out a new guide solving the issues I'm having lol. Thanks

[@ntwalimudasubiragustave7343]

So helpful man... The problem was just solved before finishing the video

[@david1801]

I was just struggling the whole day keeping the cards in place. Thanks

[@stephanechataignie]

Great tutorial as usual. A full serie for doing a great form with its validation will be great

[@proteus1]

Another quality demo from Front Ender Mentor. CSS is the Web.

[@davidcbeaudoin]

Ah yes, absolute positioning... my old arch nemesis. Lots of good stuff in here though that I wasn't aware of. I've been out of the CSS game for a while, only recently dove back in while updating a site I coded years ago. Thanks for the great lesson/overview.

[@frankroos1167]

Everything is related to the parent element...except font-size. That's still in rem. With container, that can be done too. I tried it before. It allows us to change the size of the parent element without breaking the layout. Useful to make it a "module" type thing that can change nicely when the designer desides it has to go differently. Admitted, that has nothing to do with the subject, position absolute. But it is a nice addition when it comes to the responsive aspect.

[@BallEcomThatthana]

Thank you Kevin as always great content

[@oliverstbng6329]

I thought i was already in love with css, but since i discovered your channel i know what it means to really be in love with css. You do a great job and inspire me. Greetings from germany.

[@lorenainfanter.3099]

I'm learning a lot with every video you post! Thank you very much!!

[@LuxKG]

As a teacher on different field (insert "c'mon guys, it's not a music theory" meme here 😆 ), I have to say that you nailed it with explanation! Outstanding job! Cristal clear. Thank you for all those tutorials!

[@eazygfx4815]

I still use debugging when i want to know what my div for example is doing but the border things is pretty smart, i’ve always done background: red, green etc but borders are a bit less dominant 😂 I didnt know you could use absolute as a parent i thought everything would break, awesome! Learning new tips bevause ive been away from css is letting me dig deeper into these things you normally never research because you kinda know what relative doesn& what absolute does

[@exsitewebsolution6803]

Absolutely brilliant! Please please PLEASE make a video for a responsive CHAT UI

[@sickysore]

I appreciate this video so much, thank you kind person! Very useful and easy to follow.

[@SidBarnhoorn]

This was great and very helpful! Thank you! :)

[@zakieed9554]

this is the best css chanel for peoples whos english is the second language 🤍

[@rodglennrojas3067]

I immediately liked and subscribed your channel, it works like magic. thank you.

[@jorgegamboa5408]

awesome kevin, i have learned a lot from this channel.

[@dragonnexs3621]

Kevin, I like the fact that some of your video are made to help young developers learn more about the css, but you still end up including some obscure properties without explaining too much about it because it is not the purpose of the video. I consider myself good at css but I clicked the video just in case I'm missing on something and I ended up learning about the "revert" value that you used on the max-width. Your videos never disappoint me, good job and ty for your work! 👍

[@moroccowave]

I like the way you explain things. You are really helpful. Thanks Kevin :)

[@technoph1le]

21:00 Didn't know that `position: absolute` would act as relative to its absolute positioned children. 👍

[@dave6012]

Yeah, that was a serious departure from my understanding, but lady CSS is actually on our side with that one 🤷

[@justsaybobby]

Yes let's look at that in the future.

[@bobdinitto]

Very interesting and thought provoking. Thanks, Kevin. CSS positioning always seems like Alchemy to me. But I'm slowly starting to wrap my head around it.

[@julianoow]

I tried to learn HTML and CSS once. I still know the basics but I don't code anymore. But watching you passionally giving tips to those problems that I once struggle soo much became a strange and satisfactory hobby.

[@KevinPowell]

Haha, glad that you're enjoying them! Maybe one day you'll be inspired to make a small little project for the fun of it 😁

[@dennisllopis2478]

Amazing content. Thank you Kevin!

[@malamhari_]

It's gonna be cool and very informative if we can continue finish this project sir

[@daveskye]

Please more on forms! I use them a lot in projects and having some fresh ideas would be helpful.

[@VVigneshwaranMSEC]

Actually I am doing project and really stuck in position property and correct time it's help me. Thank you man✨

[@NiceChange]

Love this. Solved so many issues.

[@The_AJ_14]

Just when I needed this for a project! Thank you Kevin :)

[@phucnguyen0110]

Another legendary project from Frontend Mentor, haha xD

[@wahyusa]

Thank you ! I've got lot of new insights

[@clevermissfox]

I’d be interested in a video looking at revert and initial and their differences ❤

[@pravinkori3381]

Really amazing and very insightful. Been watching your videos and it really has made me fall madly in love with CSS. I'd really love to have another video on creating form.

[@stepheninnocent9540]

I have learned so much from u I can now arrange my flex box very well

[@0xtz_]

I hade this problem just last night 😂😂😂 👌🏼 man u fixed the problem

[@sukumizune2477]

Great tutorial as always. What would you recommend if you needed the positioned elements to scale with the container?

[@vimvexvimvex8780]

Perfect! Many thanks!

[@NorthTonawanda1]

There's 3 ways to learn these tricks: (1) Watch the video all the way through (never works.) (2) Watch all the way through, pausing, rewinding, focusing incessantly and spending 3x longer than step one (this kind of works, but not really.) (3) Roll up your sleeves and play along (this works, but you still need to pay close attention.) I need to get better at step 3.

[@lesnaSvalka]

23:51 Kev, be careful with the glasses, man. 😆Love your videos, keeup it up!

[@aoussabah]

Thank you for this very valuable video! I have one question though, in 10:16. doesn't CSS rule with (max-width: revert) override the (max-width: 100%) rule for elements of .card-front_bg?

[@catherinegreen7454]

Love the DFTBA top!

[@sovereignlivingsoul]

positionng is such a tiresome process sometimes, great video Kevin, on the question of forms, i have been looking into the proper uses for aria with my code, forms can be improved with aria, so maybe do something on when to use aria in forms

[@borisrusev9474]

10:18 Why is there space in the bottom of the image? The default display value is "inline". Since there are no other elements in the flow, why is there still distance?

[@KevinPowell]

Because it can go inline with text, and letters like j, y, etc have decenders. That space is because it sits on the baseline (the bottom for most letters), and leaves room for those decenders under it. All inline content will have space for the decenders.

[@kevinfisher7032]

As always, an excellent demo. In my experience after hours of trying to get "position:absolute" to work (we’ll gloss over the swearing and hair pulling) the solution usually comes down to one question-Have you set or where are you setting position:relative? These days that’s usually the first thing I think about if I’m gonna be using absolutely positioned divs.

[@enigma2303]

Yes I need this so much tomorrow is the freakin deadline of our project.... 😭

[@KevinPowell]

Good luck!

[@kylevandeusen]

Epic tutorial!

[@Sarm8]

Wonderful tutorial! Super informative. Quick question, is there any reason not to put all the elements inside the card image rather than in a parent container?

[@muisadinam9615]

I was just wondering about the same question 👍 Maybe @KevinPowell can answer this one? 🙏

[@thevishalvadher]

Hello Kevin Sir i watched most of your videos and learn lots of things about css and html BIG THANK YOU for that i have 1 request for you can you make video for responsive website with HTML & SCSS please i want to know how to organize scss files on real world websites. thank you;

[@LordBecher]

Hey Kevin, well done explanations, but could you do me a favor? Surprisingly many people have sight impairments, very often issues with differentiating red and green, could you try to replace one of them in your borders? You are such an educated, helpful person, but I struggle a bit with the visuals sometimes :)

[@KevinPowell]

For sure! I try to go with high-contrast colors compared to my backgrounds, but never really took that into accouotn when I should have. Correct me if I'm wrong, but if I avoid reds/pinks/oranges as a rough rule of thumb, it should be alright?

[@LordBecher]

@@KevinPowell I am not that knowledgeable, but I know that red-green color deficiency is by far the most common, 10% of men and 1% of women are affected. In these cases not contrasting red and green is enough already, in more rare forms like color blindness (mono/dichromacy) you'd probably try to use colors with very different hue or saturation, full color blind (achromatic) people can only differentiate the value of the color.

[@onlyzach1]

Great video as always! Would love to see a full build out video with doing the background on it as well. Any reason you used 960px on the media query? Thought you were only using rem for the most part now.

[@KevinPowell]

Fort the media query, I just threw something on there, I sometimes use pixels in more beginner friendly videos to avoid having to talk about it, lol. Using anything other than pixels becomes a sticking point for some, and for media queries, it doesn't make a difference really. The one unit that is the most consistent in media queries is em though, because of a strange zoom thing in Safari, but it's a very small detail

that was very helpful. although I would use background color instead of border or outline color. that way it would not add the border size to the box.

[@KevinPowell]

You can also use outline, just like border but with no actual impact on the size ☺️

[@eggsforbacon]

Seriously dog where do you have the microphones. This is super useful right now, thank you!

[@christopherbarber7705]

thank you again sensei

[@xiggywiggs]

please please please do a video on forms and validation!!!

[@AntonioBenderas]

@Kevin Powell please make a video what is the difference between % vs. em font-size

[@KevinPowell]

When used for font-size, they're basically the same thing. 1em = 100%, 1.25em = 125%, etc.

[@Udaykumar-rt5di]

Hey @Kevin Powell your videos are really and really informative. Can you make a video on how should one code thier web app for thier company or bringing it live for other users to use. I heared some stuff like dependenies from my friends but didn't unerstand much about it.

[@lalit-singh-bisht]

you are on a whole another level...I just can't keep up with you

[@md.ataurrahmansharif5305]

Thank You very much

[@justinanderson267]

You may be able to avoid the "magic number" in the CVV section by doing bottom: 50% instead of top:44%

[@androidetube]

what is the reason for "min-block-size: 100vh;" on ".content-grid" ?

[@codeme8016]

Wondering why not using Flex to locate some of the items?

[@joshuakirby6952]

If you have heavy elements (i.e., complex svgs or filters), would "transform()" be better for performance?

[@oreki1996]

Can you make a tutorial on How to be a genius like Kevin Powell next?

[@allan_archie]

How did you do the dark mode toggle?

[@dougphillips5686]

Great info.

[@USPSLaura]

why do you prefer to use unit rem or em instead of px

[@saaika5922]

From where are you getting those projects? I would like to do some designed, instead of designing everything on my own.

[@TheOKest]

Question from a new learner, why code all the informaion on the card if you could just upload an img with the credit card information and logo already on it?

[@KevinPowell]

Part of this challenge (where I had the "form goes here"), is to make the credit card information update as it's typed into the form, so to do that, it needs to be code :)

[@Paulo280713]

great content

[@justinkelley111]

I was told that whwen you go to put a website up, they won't be visible to search engines. I guess we have to insert something into our code, I was told that this was a local plus link? How do we do that?

[@JosBlomsma]

'Magic numbery' 🥰

[@fabianmichael9457]

An alternative to using img tags is using aspect-ratio

[@KevinPowell]

100% :)

[@Tony.Nguyen137]

Hi. Can you make a video about the css property contain? Apparently this css property improves the performance of a website but I don’t understand the documentation :-(

[@KevinPowell]

I was using it today and thought to myself I should make a tutorial on it 😂 It can improve performance in specific situations, but it's a little niche so I wouldn't worry too much about it

[@mukleshossen751]

Facebook on profile page while scroll goes to bottom how to position changed on can please make a video on it

[@NotKyleChicago]

Is there a reason you used border instead of outline for the aid of visualization? I feel like you have a video that recommends outline instead of border since outline has less impact on layout.

[@PP-ss3zf]

I agree, I would assume outline shows a more accurate version of the box-model as it is inclusive of the width and height and doesn't add to it.

[@KevinPowell]

Outline is probable a better choice, but for larger stuff like this, the couple of extra pixels dive have a huge impact, and sometimes outline ends up outside the viewport on the sides, which isn't a huge deal, but not great for a tutorial. For smaller elements where pixels make a difference, it's a no-brainer though

[@RealCaptainAwesome]

How do you handle a main-content element being < the height of the window? I have found min-height: 100vh is that okay? I focus on backend development, so css wizardry is confusing and scary

[@KevinPowell]

Ideally, min-height: 100dvh, which will adapt to the mobile UI elements that move in/out, but browser support isn't amazing yet, so 100vh is fine for now, unless you run into an issue on mobile that might take a little mucking around to fix

[@RealCaptainAwesome]

@@KevinPowell thanks. I remember why WordPress was so frustrating back in the day now.

[@michalnowak2181]

thx kevin :)

[@marcorosenbaum9900]

Nice!

[@waleedsharif618]

What do you think of tailwind ? I just started to learn it and html looks too messy with tailwind

[@KevinPowell]

I'm not the biggest fan in the world :D

[@sas3021]

thank you

[@nomadshiba]

tbh as you said grid would have been a lot less painful for something like this can make this responsive too without using @media EDIT: also you can move the card number to center using left: 50%; transform: translateX(-50%);

[@ProgrammingTT]

I make projects using HTML, CSS and JavaScript (with code, for beginners).💻

[@simoncallelaverde]

Please read my other comment on "background-images" vs "imgs", and the why.