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 Agile Manifesto in Practice: Part 1

The Agile Manifesto in Practice: Part 1

  How Sourcetoad Values People Over Process The software development process can involve a lot of uncertainty for both development teams and clients alike, especially in the early phases of a project. How can the long-term vision of an application be balanced...

What to Consider When Building HIPAA-Compliant Software

What to Consider When Building HIPAA-Compliant Software

In 1999, the Department of Health and Human Services (HHS) passed the Health Insurance Portability and Accountability Act (HIPAA) as a measure to protect personal health information (PHI) and allow people control of their healthcare records. The HITECH Act was enacted...

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

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

In Part 1, we talked about the rapid growth of Buy Now, Pay Later (BNPL) and discussed its expansion across industries. In Part 2, we will consider how impending regulation may shake up the short-term lending space.   Impending Regulation of BNPL While consumers...