Media Queries
Hello, could somebody please tell me what I am doing wrong?
I have been learning media queries and I do not understand why the video, and 3 floating things are not staying together,
is it the set 75vh? I have tried to changing the height at the break point but it does'nt seem to do anything, also creates gaps within other divs.
please help. please and thank you. im really just asking on advice for media queries, ive looked at a lot of videos mostly Kevins, simply cannot grasp all the concepts.
But how would I make widths and heights look simlar through all screen sizes, like I know what I want, I just cant put the pieces together. thank you.
the video can't be seen because its on my local storage and I don't know how I can put the video in it in code pen.
https://codepen.io/Eddiev10/pen/zYXYYBw
https://codepen.io/Eddiev10/pen/zYXYYBw
7 Replies
Can you elaborate what you are trying to make?
So you want those 3 cols underneath each other on mobile? Are you building it mobile-fist?
Sorry, I am scaling from big screens first and going to smaller. Yes for the 3 cols I will switch the flex direction in the media query on smaller screens, but first I want those 3 cols to stay like that and scale down to fit a iPad Pro at least. So I want it to look good on an big screen up to a tablet but I don’t know how to scale height correctly, on big screens I have it set at height 75vh., but when I am trying to do media queries it’s just coming out the bottom and making weird margins in between sections. I guess my question is how do I scaled heights correctly , I use percentages for width and vh for height.
Let me suggest to
1. Start mobile-first as it is easier to start with all things in a single l;ong column and set blocks to rows for wider screens with media queries down the cascade
2. Start small, i.e. drop the header for now and only test-drive the 3 blocks, mobile-first. Drop the vid too as it is wee more complicated.
3. the thirds better have a common parent div - your solution is likely flex or div, which do the aligning for you easily. I see div.floats - not sure if you are using float but if you are, don`t, they are no longer used for this purpose.
Refer to my advice here: https://discord.com/channels/436251713830125568/1211631592401928232
Also you want to be very careful when using height (ideally, don’t use it) . It can result in all kinds of issues. The content and its padding should make up the elements height.
Using grid or flex with the default align-items: stretch can help make all the children the same block-size /height. It makes them all as tall as the tallest child . So put them all in one container and make that parent a grid container (or flex if you’re more comfortable). Then using auto-fit (or flex-wrap) helps reduce the need for a media query at all!
Ok thank you.
no i didnt use floats, it was jus the class name. I used flex, and centered them on the video background. but yes bad name. thank you.