Kevin Powell - Community•2y ago

Help with height responsiveness!

Project link: https://benevolent-seahorse-6c9816.netlify.app/ I drawing a blank in figuring out how to make my mid section follow changes in height. So if you go into responsive mode, and start stretching screen vertically or diagonally it should do the same, instead of being glued to the top. 😦 Halp!

80 Replies

Wolle•2y ago

From what I understand you want, putting a min-height: 100vh; on your .container (and then position the elements inside accordingly) could help you achieve it. Hope that helps.

Dovah•2y ago

@daswolle Tried all that already but just can't get it right. On body, container, main, form, fieldset, I tried doing something with every block but just could get it right.

StefanH•2y ago

What's your problem exactly? What's the intended result?

Dovah•2y ago

@stefanh So as I said, I want my header and footer to stay still, or slightly adjust, while mi mid section is the one that is doing the stretching and adapting to the device screen resolution, both vertically and horizontally. It should not be hard thing to do, I just am not being able to do it for some reason. xD

StefanH•2y ago

You want your Next Step button to be at the bottom of the page?

StefanH•2y ago

https://youtu.be/JHregeIsjPQ?t=25

Kevin Powell

YouTube

Simplify your CSS with these 3 grid layout solutions

Grid is often seen as useful for really large layouts that have a lot of different pieces, but there are other simple things that it can be super handy for as well! 🔗 Links ✅ How to pick between Flexbox and Grid: https://youtu.be/3elGSZSWTbM ✅ Getting started with CSS Grid: https://youtube.com/playlist?list=PL4-IK0AVhVjM41-Ezm5tmESVchNEi7aZU ...

b1mind•2y ago

https://codepen.io/b1mind/pen/PojdyQz

Brent Morton

CodePen

Pushed footers Flex / Grid

...

b1mind•2y ago

I prefer the Grid method just went over this with https://discord.com/channels/436251713830125568/1073641982318084337 this morning You could do this exact pattern by pulling your footer into .container and zoom zoom That is if we are understanding correctly

Dovah•2y ago

@stefanh Yeah I already tried that but did not work. xD @b1mind Looks promising! Will try it out when I'm home! 😄 @b1mind Nope. Does not work...

b1mind•2y ago

Share what does not work or I can't help

Dovah•2y ago

I linked project above, so you can see what I'm talking about, but I guess it's just way too spahetti or something since I have container, main, form, fieldset, section I did share it, I really do not know how to explain it differently

b1mind•2y ago

Ok its updated?

Dovah•2y ago

you can see it for yoruself as well, footer does not get stuck to the bottom of page when being resized, and mid does nto adapt

b1mind•2y ago

Looks the same though I don't see any grid or changes

Dovah•2y ago

I changed it on my end, it does nothing so I did not update

b1mind•2y ago

Push the changes that don't work for you or I can't help with what didn't work

b1mind•2y ago

b1mind•2y ago

So key points from this SS is html,body {height: 100%;} then pull the footer out into the .container

Dovah•2y ago

Did not want since I wrote more code, but here now i pushed it wait

b1mind•2y ago

Is the above your desired outcome?

Dovah•2y ago

Sort of, I would like for form to adjust as well. And for footer, it has form confirm button on it, will it work if I pull it out of form?

b1mind•2y ago

ahhh good point Give me a sec I'm still sipping coffee we will have to do the same but expand the main/form

Dovah•2y ago

Wait

b1mind•2y ago

Not sure if you want a <footer> element in a <form> element either 🤔 not sure on that one

Dovah•2y ago

on my part it still goes below screen size when you lower it...So you need to scroll down to find footer...It's just a convoluted mess. xD

b1mind•2y ago

what size screen height?

Dovah•2y ago

Yeah I didn't know what to do...I just made a mess wait let me screenshot it

Dovah•2y ago

Dovah•2y ago

So, you see footer? I want that to follow the screen resizing, to be stuck to the bottom of the screen

b1mind•2y ago

it is in that screen xD

Dovah•2y ago

so if I look on phone, its on the bottom if not a really small screen where it just needs to be scrolled down. IF I look on the tablet, it's still on the bottom of the screen, not in the middle Same with desktop

b1mind•2y ago

ok it can't shrink cause content sizes inside

Dovah•2y ago

Dovah•2y ago

This is how it looks with the fix You see, I needto scroll to find it Same device screen size

b1mind•2y ago

Ok but it can't shrink past its children that is why we use min-height we don't want it too.

Dovah•2y ago

So yeah, I made my content for minimal size of for example w:375px and dunno, h:600px. What I want for it to auto resize and follow screen while having the same form

b1mind•2y ago

You have kinda a visual miss nomer going on cause you translate the div up

Dovah•2y ago

Yeah it does not need to, it need to expands

b1mind•2y ago

don't set strict heights !!!!

Dovah•2y ago

I did not set height at all. xD that is what is bothering me

b1mind•2y ago

ok ok read what I said though does that make sense?

Dovah•2y ago

I have not a single height set xDF You have kinda a visual miss nomer going on cause you translate the div up this one?

b1mind•2y ago

right but your content is full

Dovah•2y ago

Yeah ok

b1mind•2y ago

Dovah•2y ago

I understant that

b1mind•2y ago

so that blank space there... is not blank you translated the div up it still lives there physically

Dovah•2y ago

Yeah yeah I do understand that, but footer does not follow. xD I'm not bothered by form staying up ther I'm bothered by footer staying either in the middle of the screen or going to the bottom and having scroll bar apear

b1mind•2y ago

missing the point

b1mind•2y ago

b1mind•2y ago

That is the space .first step takes up

Dovah•2y ago

Wait so translate is doing it?

b1mind•2y ago

kinda yes and no I'm trying to show you visually that element looks higher up cause you translated it. It DOES NOT LIVE THERE translated elements keep their original place in the dom that screenshot shows its real space

Dovah•2y ago

It f-in is doing it. xD I removed it now and it works

b1mind•2y ago

Yup so maybe you just remove it for mobile 🤷‍♂️ if it suites the design

Dovah•2y ago

How do I move the div up there then?

b1mind•2y ago

you translate it

Dovah•2y ago

That is how the project looks and keep the responsivness

b1mind•2y ago

CSS amr?

Dovah•2y ago

But it will not stay responsive right? What that? xD I always thought it just moves the div above that amount of pixels. And it will follow every resize. Like position absolute or something

b1mind•2y ago

You will need to probably pull that field set or the footer from the flow and absolute/fix it.

Dovah•2y ago

😦 All this because of that fancy look

b1mind•2y ago

Gotta dive into my own issues this morning. If I think of how I would do this I'll let ya konw

Dovah•2y ago

It's ok! Thanks for the help! I'm glad we narrowed it down.

b1mind•2y ago

Also though if it looks good on 360/740 (which this does) I would not sweat it to hard

b1mind•2y ago

Dovah•2y ago

But I thought every app needs to look good from min-max sizes

b1mind•2y ago

I do normally go down to 320/620 or what ever iPhone SE size is but I don't really care that much 360/740 is the most popular small screen size

Dovah•2y ago

Yeah, yeah. Project says 375px so I will not go below

b1mind•2y ago

na screw FEM and their 375... make sure it fits 360/740 at least

Dovah•2y ago

But it falls apart on higher sizes if I do not pull footer out. and remove translate. xD will tweek it out and see what I can do

b1mind•2y ago

it should always stick to bottom if you did what I showed This is why codpens are best I could just save my work and share it with you

Dovah•2y ago

It does! but then footer is out of form. xD And now I need to redesign it all .xD

b1mind•2y ago

cause I got it working with footer/buttons in the form rather easy too you just grid main/form and brrrr GRID ALL THE THINGS 😂 (gotta runn bbl

Dovah•2y ago

Roger! Do your own thing, I'm just glad I made it to work somehow. I'll try fixing it after I'm done with the whole project. Can't waste time and get frustarted with something like that. xD @b1mind Quickie, If I set display none to one of form pages, all the data that was entered will be lost? Or no? I want to display:none; when clicking the next button, but don't know if it will work.

b1mind•2y ago

display: none; would remove it from the dom, I would "assume" that you would lose formData values from the form this way? honestly though I have no clue TRY! lol If you want to keep something in the dom, visibility or opacity is what you need. but not sure which would be best in your case. Maybe none if it works.

Dovah•2y ago

I think that as well. Will try it. With visibility:hidden; i need to somehow stack them one on other or something like that to not take space, and it requires brain power, I'm just being lazy here with easiest solution. xD

b1mind•2y ago

Actually.... wouldn't that solve your other issue too cause you now need to stack all those either pulling from the flow with something like absolute. xD (I really need a minimal example to play with, if you can put this in a codepen)

Dovah•2y ago

@b1mind I actually don't know. xD My smol brain has short 100% capacity, so it gets overheated quickly and I have no clue right now how to change code so it fixes both things. xD I will push just to finish project to get that dopamine rush, then I will patch the holes later. xD Also, @b1mind

let counter = 0;
nextStepBtn.addEventListener('click', () => {
    counter = counter + 1;
    if(counter > 3) {
        counter = 3;
    }
    // fieldset[counter].classList.add("active");
    // !fieldset[counter].classList.add("hidden");
    if(counter === 1) {
        firstStep.classList.remove("active");
        secondStep.classList.add("active");
    }
    if(counter === 2) {
        secondStep.classList.remove("active");
        thirdStep.classList.add("active");
    }
    if(counter === 3) {
        thirdStep.classList.remove("active");
        fourthStep.classList.add("active");
    }
    console.log("Counter: " + counter);
})

let counter = 0;
nextStepBtn.addEventListener('click', () => {
    counter = counter + 1;
    if(counter > 3) {
        counter = 3;
    }
    // fieldset[counter].classList.add("active");
    // !fieldset[counter].classList.add("hidden");
    if(counter === 1) {
        firstStep.classList.remove("active");
        secondStep.classList.add("active");
    }
    if(counter === 2) {
        secondStep.classList.remove("active");
        thirdStep.classList.add("active");
    }
    if(counter === 3) {
        thirdStep.classList.remove("active");
        fourthStep.classList.add("active");
    }
    console.log("Counter: " + counter);
})

I wrote this simple code to scroll through pages, but when I click next step it jitters for a briefe second, showing second step, then returns to the first. Is it something to do with the form, or something else? It like refreshes the page Ohhh type button does it I'm getting too comfortable here, asking questions instead of googling them. xD All good

b1mind•2y ago

yea if you don't have a button type it will default as a submit inside <form> if it does not have one specified too? also I'm smol brain so feelsRealMan hah

Gaming

Programming

Help with height responsiveness!