How to execute this kind of design?

[calebdre]

Hey guys, I’m trying to code the coming soon page of my website and i got stuck =/
I want to have two halves of the page to have two different colors and i was going for a typographic type thing. I found out that setting the container to an absolute position and giving it a top, bottom, left and right value of 0 stretches it to the whole page. But if the page shrinks (for different sized screens), the words go all crazy. How would i be able to fix that? Also, i’m using bootstrap for here, but i don’t think it’s causing anything.

Here’s the code:
http://plnkr.co/edit/OyU2sVG86FKNdeTA0Cjc?p=preview

[macharborguy]

by “the words go all crazy” do you mean that the words overlap eachother on the top and bottom when they wrap?

[calebdre]

Yes!

[macharborguy]

k, just wanted to make sure. I was expecting text to be all over the place.

from the looks of it, this appears to be a CSS line-height issue. Play around with adjusting the line-height of the different blocks of text that are having the overlap issue.

If it comes to it, you may find media queries useful as well for changing the line-height for different browser widths, but that all depends on your design. Simply changing the line-height property to fix the overlap may create additional, unwanted space between lines of text when it is not overlapping.

[macharborguy]

example: in the style.css file, add “line-height: 1em” to the “.top .logo” selector.

when the window is small enough that it forces the .logo text to wrap, it no longer has the overlap.

HOWEVER, when not wrapped, the black text below it (the first .pitch block) no longer has the same placement it did if you had not added “line-height: 1em” to the logo selector.

[chrisburton]

> i was going for a typographic type thing.

Huh?

[Author]

Posts