The Prospect Hollywood was a challenging project due to the design with its vertically-centered content. As easy as it is to center content horizontally, from the perspective of development it’s more difficult to center content vertically. And while new CSS concepts, like “flex-box”, provide some flexibility, as it were, there are continuing challenges, especially considering responsive design.
You see, in terms of width, in our RTL (right-to-left), english-speaking corner of the world wide web, content will simply scroll vertically if it gets squished horizontally. But what if the browser gets reduced in height so that the content doesn’t fit. In most cased, you’d still want the content to scroll vertically – nobody likes to read long lines of text and then find the next line all the way to the left again.
So we calculate the height of the container of content – compare it to the available height of the browser and then calculate the vertically centered position of that content container.
if the height of the browser is less than that of the content container, we position the content container at top of the browser window and then let it scroll.
It’s all not that complicated, admittedly, but it’s just some complexity we have to consider as developers and keep in mind when estimating project cost and timeline.
