• Resolved JakeyPeester

    (@jakeypeester)


    I’m familiar with Bootstrap’s graceful degrading, where a two-column layout on big screens will automatically degrade into a one-column layout on mobile, using code like this:
    <div class=”col-xs-12 col-sm-6″>

    In that example, the content would span 6 units on tablet computers and larger; but on mobile it would span 12 units, meaning it automatically is full-width (and thus, single column).

    What’s the easiest/best way to emulate this behavior in this theme?

Viewing 4 replies - 1 through 4 (of 4 total)
  • You could to this with CSS Media Queries but the responsive theme already includes a grid system.

    I found this in the responsive css:

    .col-60,
    .col-140,
    .col-220,
    .col-300,
    .col-380,
    .col-460,
    .col-540,
    .col-620,
    .col-700,
    .col-780,
    .col-860 {
    	margin-right: 2.127659574468%;
    }
    
    .col-60 {
    	width: 6.382978723404%;
    }
    
    .col-140 {
    	width: 14.893617021277%;
    }
    
    .col-220 {
    	width: 23.404255319149%;
    }
    
    .col-300 {
    	width: 31.914893617021%;
    }
    
    .col-380 {
    	width: 40.425531914894%;
    }
    
    .col-460 {
    	width: 48.936170212766%;
    }
    
    .col-540 {
    	width: 57.446808510638%;
    }
    
    .col-620 {
    	width: 65.957446808511%;
    }
    
    .col-700 {
    	width: 74.468085106383%;
    }
    
    .col-780 {
    	width: 82.978723404255%;
    }
    
    .col-860 {
    	width: 91.489361702128%;
    }
    
    .col-940 {
    	width: 100%;
    }

    You should try this classes

    Thread Starter JakeyPeester

    (@jakeypeester)

    Julian, thank you immensely! I should’ve thought to look there. Cheers.

    Thread Starter JakeyPeester

    (@jakeypeester)

    Julian – if you see this, I’m actually confused where you found that responsive css in Hemingyway?

    I’m going to try media queries for the time being however.

    Thread Starter JakeyPeester

    (@jakeypeester)

    Media queries worked – can’t believe I didn’t dip into those sooner. Thanks again!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Responsive – make two column layout go to one column on mobile?’ is closed to new replies.