I have a site with 4 columns. I would like to make it responsive but instead of displaying the columns at the bottom like Bootstrap's default method, I would like columns to be full width of the device and slide between them.

Here is a schema:

And what I did so far:

jsfiddle

@media (max-width: 979px) {
.container {
    max-width: none !important;
}
.column1 {
    width: 100%;
}

}

Is it possible to make a column full width using device width and not container width? Do I have to use javascript?

I have a site with 4 columns. I would like to make it responsive but instead of displaying the columns at the bottom like Bootstrap's default method, I would like columns to be full width of the device and slide between them.

Here is a schema:

And what I did so far:

jsfiddle

@media (max-width: 979px) {
.container {
    max-width: none !important;
}
.column1 {
    width: 100%;
}

}

Is it possible to make a column full width using device width and not container width? Do I have to use javascript?

• javascript
• jquery
• html
• css
• twitter-bootstrap

• 1 Display table es to mind, but you're going to have to use javascript for the swipes – Graham Walters Commented Sep 11, 2013 at 23:20

1 Answer 1

If you don't mind using javascript, you can use Swipe.js

The html structure goes like so:

<div id='slider' class='swipe'>
  <div class='swipe-wrap'>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

The CSS looks like this:

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

And the Javascript looks like this:

window.onload = function() {
  window.mySwipe = Swipe(document.getElementById('slider'));
}

Don't forget to include the javascript file: https://github./bradbirdsall/Swipe/blob/master/swipe.js

Here's a demo

Edit Providing you only want this to apply to mobile devices, here's the mobile specific code:

The HTML would change to this:

<div id='slider'>
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

And the JavaScript would change to this:

window.onload = function() {
  if ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    var slider = document.getElementById('slider');
    if (slider.classList) {
      slider.classList.add('swipe');
      slider.getElementsByTagName('div')[0].classList.add('swipe-wrap');
    } else {
      slider.className += 'swipe';
      slider.getElementsByTagName('div')[0].className += 'swipe-wrap';
    }
    window.mySwipe = Swipe(document.getElementById('slider'));
  }
}

Here's another demo