Creating Responsive Content using HMTL/CSS - No Javascript required

10th January 2014

Hi all,

First time I have blogged in quite a while. Forrk have had a very exiciting few months with our first Social App being released in early December which ended up trending on Twitter and receiving hundreds of thousands of uniques (Social Santa), anyway enough of the shameless plug. We are here today to discuss responsive content.

It's a tricky area, responsive design is now pretty much a standard accross the web and whilst we developers can easily hide and manipulate the positions of elements based on the users screen size it is difficult to actually change the content without using JS. Whilst working on a new website today I created a pretty cool trick in order to allow us to do that. I will explain how to implement this below, you can check out a live example here.

First up is the HTML - pretty basic I'm sure we can agree. 

Fashion discount copuons are the bomb. They work in a variety of ways, you can use them at most stores cause they are well cool and stuff. Some codes give you up to 50% off at some of the worlds top retailers.

We have a basic DIV with the class 'responsive-content' which contains a paragraph of text. The only thing out of the ordinary here is the attribute 'data-small' which contains the content we wish to display responsively. 

Now for the CSS. Again it is pretty basic stuff but I feel it definitely achieves what is needed whilst remaining as lightweight as possible. (Remember my CSS is actually SCSS and therefore classes etc are nested, you can easily replicate it in standard CSS by simply removing nesting)

.responsive-content
{
    &:after
    {
         display:none;
         content:attr(data-small);
    }
}


All we are doing here is creating a pseduo element :after and ensuring the content is that of its parent elements 'data-small' attribute. Now all that is left to do is show/hide the content based on screen size.

@media (max-width: 550px)
{
.responsive-content
{
    *
    {
        display:none;
    }
    &:after
    {
        display:block;
    }
}


This CSS includes a media query which comes into affect once the users viewport is < 550px. At this time we are instructing all children of the 'responsive-content' element to be hidden and the pseudo element created using the 'data-small' attribute to be shown.

You can see a live example of this in action here. If you have any questions you can always contact me on @ddarrko.




 

comments powered by Disqus

Written by

daniel

request a callback

Why not check us out on some of our social networking accounts. Alternatively, if you would prefer to contact us directly, you can always drop us a line below or on hello@forrk.co.uk or tell us about your project and get a quote.

GET A QUOTE Back to top