So I'm working on something at the moment, and I'm trying to center the logo, subtext, and the input form in the middle all in line. It seems as though the centering is off and I can't seem to figure out why.
Any ideas?
http://tantihf.me/test/
DO NOT DEAL WITH THIS MEMBER
Sep 29, 2016 08:45 PM
(This post was last modified: Sep 29, 2016 08:46 PM by Two-Ton 21.)
If you mean your logo isn't pushing down, it's not inside your content wrapper. I'd put a margin on top of both input elements for better spacing and response as-well.
Not vertically buddy. I mean the logo centering in line with everything, and also the subtext under it. Does it seem centered to you? It may just be my eyes tricking me.
DO NOT DEAL WITH THIS MEMBER
Sep 29, 2016 08:51 PM
(This post was last modified: Sep 29, 2016 08:56 PM by Two-Ton 21.)
On chrome and Android, it looks fine. Maybe it's your device?
I think it's just my eyes I guess, thanks :)
It may not look exactly centred but that's down to your font choice (variable-width fonts tend to look slightly off sometimes).
In terms of your actual HTML & CSS, I recommend not relying on a <br /> and instead using a <h1> around your logo "Bags" and some block container for your little sub-text.
Dostoevsky(const Dostoevsky&) = delete;
DO NOT DEAL WITH THIS MEMBER
I don't know about you, but the only thing that looks off to me is the black bar.
Click to enlarge
[img=999x570]http://715.wf/sharex/images/png/YHOKC.png[/img]
Occurs on Opera, Edge and IE. Have not tested Firefox or Chrome.
What size monitor are you using? That's a bit odd.
DO NOT DEAL WITH THIS MEMBER
(Oct 1, 2016 02:10 PM)SIM-2306826 Wrote: What size monitor are you using? That's a bit odd.
15.6 inch 1080p laptop
doesn't seem off to me, and it is centered correctly;
What you could perhaps do is show the continue button below the input, but I don't think that would look very much better.
I like the way it is, very simple and clean.
FS Webdeveloper
I'm confused by what the black bar is you guys are seeing. I do not see that..
I have a smaller screen than most and its showing a scroll bar for that page.
Set the #gradient{
height: 100%;
}
instead of 800px as it's far better allround for user experience :)
Oct 3, 2016 10:35 AM
(This post was last modified: Oct 3, 2016 11:05 AM by SIM-2306826.)
It is set to 100%, can you show me where it says 800px still?
Never mind. Figured out why. Thanks, it was caching.
|