Hi all! So, I’ve been trying to solve this issue for the past 2 days, but I can’t seem to see where the problem is, and at this point I’m already feeling a bit frustrated. So if anyone could point me in the right direction, I would be super grateful.
This is the thing (I hope I’m describing it correctly): my survey form doesn’t gets “centered” as the screen shrinks, it doesn’t move from it’s “fullscreen” position . Only the header rezises with the window, and seems to be functioning okey, so I don’t know what property of the survey container I have to modify to make it work properly. If the explanation isn’t clear, please let me know.
Hi
Having a margin of 400px on both sides is an issue, I would replace 400 with auto. I would also remove the display inline block part and give the container a width of 60% or whatever suits you. I just did that to your code and it worked for me.
In case I wasn’t clear, I am talking about the #container
Thank you so much! You’re awesome!
I have another related question, if you don’t mind, to understand why this changes worked: Having 400px on each side made it get “pinned” on that position when shrinking the window? So auto makes the container adjust to the input items? I think I don’t understand why would that propertie would change the disposition when shrinking, I don’t get the relation.
I’m sorry if I’m asking something stupidly basic, I’m very new to front-end, and as I’m learning by myself, this is a great opportunity to understand this.
Auto is fully responsive and keeps things nicely centered as the viewport increases or shrinks, although the display inline block did prevent auto from working properly until I removed it. Giving the container a responsive width like % or vw is also important as if given a set width in pixels it would probably mess things up on smaller viewports.
Others will be able to explain in more depth than I can so feel free to raise it as a topic if you wish to understand in more depth, I tend to know what will work but not necessarily why.
I didn’t think about it at the time but you could have actually turned your 400px margin to a responsive value like 15%, that way you wouldn’t even need to set a seperate width. Display inline-block had to go either way as it messes things up for reasons I don’t fully understand.
