How to apply css to nested lists

[newcoder1010]

Hello,

 

I have this list:

<ol>

<li>Get your Facebook page URL.
<ol><li>hhhh </li>
<li>Click </li>
<li>hhh.</li>
<li>Copy </li>
</ol></li>

<li>Get your twitter URL.
<ol><li>hhhh </li>
<li>Click </li>
<li>hhh.</li>
<li>Copy </li>
</ol></li>


</ol>

I am not able to give any class names. How can I apply css to outer li and inner li.

 

I like to say outer li

font-size: 22px

and inner li

font-size: 12px;

Thanks.

 

[dsonesuk]

ol li { font-size:22px;}

ol ol li { font-size:12px;}

[newcoder1010]

Thank you. Worked perfect.

[newcoder1010]

I would like to bring the 2nd ol li to little bit left in mobile version. Desktop looks good. 2nd ol li has texts plus images. so in mobile 2nd ol li floated to almost right I used float left but top ol li overlaps. How can I fix it to bring the 2nd ol li to center of the page?

@media only screen and (max-width: 500px) {
ol ol li { font-size:12px; float:left}
    
}

https://drive.google.com/file/d/0B7xIEuVi005yOHJySTYtcmI3NkE/view?usp=sharing

Edited November 17, 2016 by newcoder1010

[dsonesuk]

Image is useless, elements could have padding, margins, text-indent, which you can adjust to suit your needs.

[newcoder1010]

I tried this did not work. How can I bring the li with the image little to left so image is in the center?

li{ text-indent: -1em;
    padding-left: 1em;}

[dsonesuk]

How can I ever know without access to your current html code and css, that is the more important question.

[newcoder1010]

site

 

If you please see it in mobile version, you will see that images are floated to right as expected. I would like to bring the image and li texts both little left.

 

Thanks.

[dsonesuk]

ALL ul and ol have a default huge padding on left, that may be different between browsers, this is your problem! You need to set this padding so all browsers will use this setting and be identical.