Hi all -
I have set up a views slideshow (what a great module) to display a series of image fields from a content type.
I have used the advanced "items per slide" option to have 4 images show at once before transitioning to the next 4 images.
My problem is that I cannot see how or where to style the slide to show the 4 images side by side (is the correct CSS term display:inline?) as opposed to how they are at the moment, i.e. stacked on top of each other as in a column.
I haven't found a solution to this in the issue queue or elsewhere on the web - anyone any ideas?
Thanks as always,


Aptalops’s picture

Hi, just bumping this as I have not yet found a solution and I suspect there could be a simple way to achieve this (although not so simple as I can find it myself!).

intyms’s picture

Status: Active » Fixed

inside of your CSS file add:

.write-the-element-class-here {
  float: left;

or read this for more solutions:

Also, to keep parent div from collapsing, add "clearfix" class to the parent div, or read more here:

An online book about CSS:

Also, there is a link with a working example inside of this issue #1687796: Theme "Items per slide". You can study the code with Firebug for example.

Aptalops’s picture

Thanks very much intyms,
I tried your first suggestion and it worked perfectly. However, as soon as the number of elements exceeded the 'items per slide' and necessitated a new slide, my rows turned into columns again... is this an example of the parent div collapsing? I'll go through your other links and see if I can figure out that working example. Cheers.

edit: just figured it out! kept drilling down through the divs, making every one float left until I got the one I needed. For me it was:

.views-slideshow-cycle-main-frame-row-item {
float: left;

thanks again

intyms’s picture

Please upload a screenshot of the problem.
Also, show your css code please.
Do you have a website where i can see the slideshow and test it?

I suppose that you applied CSS to a specific row, for example for the first row.
If so, try to use a class which will match all rows.

is this an example of the parent div collapsing

no i don't think so

Aptalops’s picture

yes, you're right - started drafting the edit to my post before I saw your reply. This did the trick (at least for now!):

.views-slideshow-cycle-main-frame-row-item {
float: left;

thanks again

intyms’s picture

I am glad that you have found the solution.
Congratulations !!

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

drupalreggie’s picture

Status: Closed (fixed) » Active

The above CSS won't work for me unfortunately. Have tried float nearly every selector left and still no joy...

Any help appreciated.

drupalreggie’s picture

Status: Active » Closed (fixed)

Ah, it does work but not when pasting into Chrome's or Firefox's html inspectors. Have to add it to the site's CSS and then reload the page to see the effects.

clintthayer’s picture

Hmmm... not seeing this working on my end. Would the width of the CSS containers constructed by the view play a role in not seeing the float work?

Kitty77’s picture

Hello guys,

I'm being stucked here with this related problem.

I've tried .views-row which worked fine then my computer crashed (blue screen) and it's no longer working... tried to clear drupal's cache, browser's cache, tried viewing it with different browsers and no luck.

I've also tried the above CSS and I'm still having the same issue.

The first 2 images are showing side by side but the next 2 are on the top of each other.

Does anyone have a clue ?

Any help will be much appreciated.

Kindest regards,