Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
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,
A~
Comments
Comment #1
Aptalops CreditAttribution: Aptalops commentedHi, 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!).
thanks,
A~
Comment #2
intyms CreditAttribution: intyms commentedinside of your CSS file add:
or read this for more solutions:
http://stackoverflow.com/questions/8920247/how-to-make-multiple-divs-dis...
Also, to keep parent div from collapsing, add "clearfix" class to the parent div, or read more here:
http://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-flo...
An online book about CSS:
http://www.w3schools.com/css/css_intro.asp
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.
Comment #3
Aptalops CreditAttribution: Aptalops commentedThanks 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.
A~
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:
thanks again
Comment #4
intyms CreditAttribution: intyms commentedHello,
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.
no i don't think so
Comment #5
Aptalops CreditAttribution: Aptalops commentedyes, you're right - started drafting the edit to my post before I saw your reply. This did the trick (at least for now!):
thanks again
A~
Comment #6
intyms CreditAttribution: intyms commentedI am glad that you have found the solution.
Congratulations !!
Comment #8
drupalreggie CreditAttribution: drupalreggie commentedThe above CSS won't work for me unfortunately. Have tried float nearly every selector left and still no joy...
Any help appreciated.
Comment #9
drupalreggie CreditAttribution: drupalreggie commentedAh, 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.
Comment #10
clintthayer CreditAttribution: clintthayer commentedHmmm... 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?
Comment #11
Kitty77 CreditAttribution: Kitty77 commentedHello 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,
~K.