Why does this happen, and how can I fix it? Ive read that there can be compatibility issues between browsers but I didn’t think that it would be this bad my login app worst even work in chrome and Firefox but works perfectly in Safari. What gives I took special care designing it to be responsive and using simple clean code so that it would work on all size devices. But I didn’t expect different browsers to be a problem.
I would try writing media quieries but the screen size does not change and the screen size is not the issue. its the browser… How do I fix this?
My javascript wont run in Chrome and my main header collapses onto my inputs. To me, this is bizarre.
Please remember that no one but you knows what “correct” is unless you tell them. I mean, I can see that the h1 “Sign Up Today” text is covering the input elements, but I don’t know what the design is supposed to look like. So please provide an image or explanation of what you expect to be seeing.
It looks like you have an onclick handler on the button that calls signUoToday(), looking in your script file there is no function called signUoToday. I guess this takes precedence over the event listener defined in your script.
Thanks @colinthornton . This is what the layout should look like, along with the working JavaScript. I added an onclick to the html in hopes that that would help the javascript work… but it looks like I have a typo, lol ive fixed it. not sure if that will help though I was kinda going out on a limb by adding that. the original javascript code is running from my script tag and not an onclick.
So, the #container element is the big white box. In your design, the “Sign Up Today” text is inside the white box. But in your HTML, the corresponding h1 element is outside the #container element. I think you should move it inside in order to work towards the design you expect.
Sorry, I left all the CSS work for you to figure out! Hint, you probably don’t want to position the heading absolutely, since you want it to affect the layout of the input elements. Right now with position: absolute; it’s sort of floating there in space, so the inputs are free to move in underneath.
Yeah, I reloaded your page and then removed the position and margin styles from the h1 and hr, and added flex-direction: column; to the #container element. Is this more of what you were going for?
my login app worst even work in chrome and Firefox but works perfectly in Safari. What gives 
I took special care designing it to be responsive and using simple clean code so that it would work on all size devices. But I didn’t expect different browsers to be a problem.
Im seeing that it IS inside the container.
. hmm let me try that out and see if it works.
