Responsive Content Canvasing With Fixed Ratios

Jun 13, 2016

Today I would like to discuss a concept aimed at preparing an area of content that is yet to be loaded. Or, more precisely, pre-determine the height of some content that has not yet been displayed on the screen. A great example of this would be a slideshow system such as Flexslider, which hides it’s content while loading and waits for the document to become ready before then rendering to the view.

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.

RECENT POSTS

The Evolution of Buy Now, Pay Later in eCommerce: Part 1

The Evolution of Buy Now, Pay Later in eCommerce: Part 1

If you’ve shopped online recently, you’ve probably noticed an increase in financing options being offered at checkout. An increasingly popular option, “Buy Now, Pay Later” (BNPL) services offer instant short-term loans at point-of-sale (POS), often without interest or...

The State of Mobile Apps in the Cruise Industry

The State of Mobile Apps in the Cruise Industry

Since 2018, Sourcetoad has been very interested in the world of cruise mobile applications and their features. We’re interested partly because we want to be better software engineers, and partly so that we can better inform our clients. This interest drove us to begin...