I have been trying to implement a vertical scrolling site that is also responsive. For that purpose, I have not used a responsive grid, only media queries. But I do have some blanks to be filled and I was hoping that you might shed some light.

First of all, I haven't used grids because I need elements to be contained either in the 100% width/height of viewport, or the 1200px Width/100% Height (and responsively to lower viewport sizes) of the viewport. My top tier screen is 1920x1080.

I have laid down some screens (mainly they are slices in the same viewport, for example 3 or four columns), but my problem is with a circular content carousel that is contained on 1200px and displays 3 columns at each time with a simple image and text below. Up to the ipad break-point (1024px - landscape or 768px portrait) it works fine. But when I go to the iphone breakpoints all hell breaks loose.

  1. How can I implement the responsiveness on the carousel? Are there ways for example to have this on larger screens as a three column carousel, but what do I do when it comes to mobile devices?
  2. Is vertical scrolling site compatible with the responsive web design or is it a bad tactic?
  • 2
    Your question seems very implementation centered. What is your user experience concern here, specifically?
    – kontur
    Feb 19, 2013 at 10:15
  • Mostly how the carousel would be user friendly. Where should I ask about the implementation?
    – Panagiotis
    Feb 19, 2013 at 11:15
  • 1
    stackoverflow.com is the place for concrete how-to code questions. Could you provide mock-ups or screenshots (links to those, if you can't insert the images yourself yet as new user) of things that look or work in a problematic way? With your question describing different screensizes and scenarios, it is a bit hard to really pin down what is the thing that causes you trouble.
    – kontur
    Feb 19, 2013 at 11:20
  • Because most carousels work with absolute positioning, you would need to change it by modifying the javascript. It's not difficult to do, but if you haven't worked with js you will need help. You would be replacing the fixed widths the carousel calculates for dynamic ones based on the current size of the window. But it is something that can be done, so there's no problem combining carousels with responsive design. And there are some plugins that are ready for responsive too.
    – Yisela
    Feb 22, 2013 at 2:08
  • 1
    Also see caroufredsel.dev7studios.com - this is a carousel that has a "responsive" setting.
    – kontur
    Feb 22, 2013 at 7:15

1 Answer 1


I can imagine that. I think you need to discard the carousel on a certain (iPhone-ish) width and implement a user-controled carousel - like the Swedish newspaper Expressen:

enter image description here

Below the big header you see navigation arrows, and a red marker besides three gray ones. These are a carousel implemented on iPhone width fully user controlled. This is the same carousel viewed on the web:

enter image description here

On the web it all moves (annoyingly), but on the iPhone all is still. Nicely implemented! Do the same and you'll get my cheers!

Not the answer you're looking for? Browse other questions tagged or ask your own question.