Due to the content being hidden on load, there is no way for the document to know what the potential content height is going to be, without defining a set height, which is terrible for responsive design. This may cause issues such as the content briefly loading over top of or offsetting the position of other content areas on the page. While ugly as that may be, there is actually a method to prevent it, with a concept I like to call content canvasing.
This method assumes your content area will be of a fixed ratio such as 2:1, 16:9, etc.; and relies on an unorthodox effect caused by setting an elements’ width to 100% and padding-top to some divisible proportion; say 50%.
Here is an example:
.content-canvas {
width: 100%;
padding-top: 50%;
}
That in turn gives us a canvas with a ratio of 2:1 to work with. We now have an element making up the space to account for when our content is finally rendered to the view. Now we just need to have our content fit within the space we have provided. The way we do that is to position our content inside the new canvas element with position absolute and margin-top set to negative the amount of top padding from our parent element, the content-canvas class.
Positioning inner content
.content-canvas {
width: 100%;
padding-top: 50%;
}
.content {
position: absolute;
margin-top: -50%;
}
.content img {
width: 100%;
height: auto;
}
View the Codepen to follow along:
http://codepen.io/philsanders/pen/NNZgxZ
Conclusion
Although, I did not setup an example with Flexslider slideshow for my sample content, you should be able to see how we have prepared a space for our content and positioned it where it needs to be once it has finished loading. This method could be modified and used with most any type of content so long as you can determine a fixed ratio to work with. And that’s it. I hope you found these tips informative and useful. Thanks for reading and happy coding.
