How do I this this <ol> so when browser is shrunk it goes to display inline?

HTML & CSS
1

Hello all.
on this page i have started working on:

http://www.danielamorescalchi.com/wackerSan/indexTest.php

when I shrink the page to about 320 I’d like to have the <ol> that hold the slide indicators w/the recycle symbol to fall inline below the slider.
I tried the obvious.

ol{display:inline-block}

& w/

ol li

…no dice.

also can the expert here point to a great page w/the info on “>”& “+” so I’ll know when to use them.
As

ol>li

thx
D

2

It’s not the <ol> that you want to display as inline-block, but the <li>s. E.g.

@media only screen and (min-width: 320px) and (max-width: 480px) {
    .carousel-indicators li {display: inline-block;}
}

point to a great page w/the info on “>”& “+”

Yup:

3

Thanks Ralph. that did it.
I had tried

ol li {display: inline-block;}

(at least pretty sure I did) don’t think it worked.
thx also for the ref resources.
D

4

btw…I like your link :slight_smile: Carousels suck
but most likely still be using it for now.