Re: Responsive design - how can I dynamically re-size a column ?

[Wemerson Couto Guimarães]

You can use the @media in css..
http://www.w3schools.com/css/css_mediatypes.asp

<style>

    @media screen and (min-width:320px) {
        .hidden-tablet{
            display: none;
        }
    }

    @media screen and (min-width:980px) {
        .hidden-tablet{
            display: block;
        }
    }


</style>

<div class="row-fluid media-container" id="snippet">
    <div class="span4 "> </div>
    <div class="span4 "> </div>
    <div class="span4 hidden-tablet"> </div>
</div>





2013/1/26 reversible <raul.ivan...@gmail.com>

> Hi folks,
> I have the following snippet which works fine for a desktop:
>
>   <div class="row-fluid media-container">
>         <div class="span4 "> </div>
>         <div class="span4 "> </div>
>         <div class="span4 "> </div>
>    </div>
>
> the goal is to disable the third div inside the row when I am in a tablet,
> so I did something like this
>
> <div class="row-fluid media-container">
>         <div class="span4 "> </div>
>         <div class="span4 "> </div>
>         <div class="span4 hidden-tablet"> </div>
>    </div>
>
> I ended up with two divs with the span4 class, this is causing a white
> space in my layout, what I really want is that the two first divs takes 50%
> and 50%, in oder words I would like to end up with something like this
>
> <div class="row-fluid media-container">
>         <div class="span6 "> </div>
>         <div class="span6 "> </div>
>    </div>
>
> do you know where can I find a clean approach for this? is it better to
> override the CSS rules or just change the span class using JS?
>
> thanks
>
>


-- 
Wemerson Guimarães
Rio Verde - Go - Brasil

--