Ordered lists

[twoscotsabroad]

Can I adapt the size of the numbers? They look small next to H3 and H2.

Many thanks

Example: https://www.twoscotsabroad.com/best-backpacker-insurance-true-traveller-world-nomads-insurance/

Saw a similar topic to put this in CSS but can’t find CSS option anymore?

[Prasant]

Hello @twoscotsabroad,

Thanks for asking.

You can add following CSS under X > Theme Options > CSS:

.entry-content li {
    counter-increment: step-counter;
    list-style-type: none;
}
.entry-content li::before {
   margin-right: 7px;
   content: counter(step-counter);
   border-radius: 100%;
   color: #000;
   float: left;
   font-size: 19px;
}

I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

For the CSS code itself, I suggest that you get started with this tutorial:

Thanks.

[twoscotsabroad]

This messed up my site.

When I added it the ordered list appeared everywhere - homepage, social media share icons
The numbers were strange, didn’t look like the font, indented for lists close together

I removed it and now it has taken every ordered list out of my site?

[twoscotsabroad]

[twoscotsabroad]

Numbers now removed.

[twoscotsabroad]

My host is backdated site to last saved.

[rad]

Hi @twoscotsabroad,

Yes, it will affect everything since the lists being used has no distinction between other lists. Instead, add your list with specific selector, for example using ordered_lists_standard

<ol class="ordered_lists_standard">
<li>
<h3>How long are you travelling?</h3>
<p><span style="font-weight: 400;"> Companies cater for single and multi-trips, short and long-term travel adventures – offering one-year travel insurance packages (and up). </span></p></li>
<li>
<h3>What type of activities will you be doing while travelling?</h3>
<p><span style="font-weight: 400;"> You have to be mindful that some packages do not cover high altitude hikes, diving or winter sports. These <a href="https://www.twoscotsabroad.com/adventure-travel/" target="_blank" rel="noopener">adventure activities</a>&nbsp;tend to increase the price of your insurance. This isn’t a reason to leave them off your itinerary, if you are thrill seeker like me you will regret not taking the cover when you are on the road!</span></p></li>
<li>
<h3>Do you have pre-existing conditions?<span style="font-weight: 400;"><br>
</span></h3>
<p><span style="font-weight: 400;">Not quite backpacking related but my poor grandparents are doing a cruise for their diamond anniversary and their insurance is going to cost them the same as the cruise. You have youth on your side, enjoy it! Also, your age does matter, most companies will not cover travellers over a certain age point. </span><span style="font-weight: 400;"><br>
</span><span style="font-weight: 400;"><br>
</span><span style="font-weight: 400;">Side note about conditions. If you are sh*t faced when you hurt yourself, you are probably going to get declined. If you’ve had a few glasses of wine and are in control, you might still have your claim accepted.<br>
</span></p></li>
<li>
<h3>Do you intend to work while travelling? <b><br>
</b></h3>
<p><span style="font-weight: 400;">Working holiday travel insurance is a different ballgame! Check out our FAQ section for information on WWOOFing and working.</span></p>
<div align="center">
<h4 style="background-color: #969696; padding: 1.0em; max-width: 45.0em; margin: 1.0em 0; border: solid 1.0px #cccccc;"><span style="color: #ffffff;"><span style="color: #ffffff;">» » <a style="color: #ffffff;" href="https://www.twoscotsabroad.com/workaway-and-helpx/" target="_blank" rel="noopener">You may also like our guide to volunteering while abroad</a> «&nbsp;«&nbsp;</span></span></h4>
</div>
</li>
<li>
<h3>Are you already travelling? <b><br>
</b></h3>
<p><span style="font-weight: 400;">Getting travel insurance while abroad is much harder then extending a pre-existing package but it is possible at an additional cost.&nbsp;</span><span style="font-weight: 400;"><br>
</span></p></li>
</ol>

Then you can simply apply this CSS without affecting other lists.

    .ordered_lists_standard > li {
    counter-increment: step-counter;
    list-style-type: none;
}
.ordered_lists_standard > li::before {
   margin-right: 7px;
   content: counter(step-counter);
   border-radius: 100%;
   color: rgb(96,96,96);
   float: left;
   font-size: 20px;
   font-weight: 600;
   position: relative;
   top: -3px;
}

Thanks!