Title: Cutting off numbered lists
Last modified: August 22, 2016

---

# Cutting off numbered lists

 *  [RebeccaEmma](https://wordpress.org/support/users/rebeccaemma/)
 * (@rebeccaemma)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/cutting-off-numbered-lists/)
 * Hi all
 * I’m very, very new to WordPress and have very limited IT knowledge and experience–
   but I’m usually a quick study so hopefully will pick things up easily enough 
   as I go.
 * Firstly, I have two main issues I am trying to work through but am under the 
   impression that I need to start a new topic for each issue? Until I receive clarity
   on this, I’ll keep this thread to one topic.
 * I have a numbered list (from 1 – 355) on my site: [http://rebeccaemma.com/the-list/](http://rebeccaemma.com/the-list/)
   
   However the numbers appear to be cut off both on the desktop and mobile version.
   How do I remedy this?

Viewing 15 replies - 1 through 15 (of 18 total)

1 [2](https://wordpress.org/support/topic/cutting-off-numbered-lists/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/cutting-off-numbered-lists/page/2/?output_format=md)

 *  [Bojan Radonic – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support4/)
 * (@wpmudev-support4)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/cutting-off-numbered-lists/#post-5608771)
 * Hey there RebeccaEmma,
 * Hope you’re well today!
 * This can be fixed with some custom CSS by adding some padding on the page content.
   Try adding the following CSS code in the style.css file of your [child theme](http://codex.wordpress.org/Child_Themes)
   or add it in your site using the following plugin if your theme doesn’t have 
   custom CSS tab.
 * [http://wordpress.org/plugins/simple-custom-css](http://wordpress.org/plugins/simple-custom-css)
 *     ```
       .content .page {
       padding-left: 3px;
       }
       ```
   
 * This should make numbers not being cut off. Hope this helps 🙂
 * Best regards,
    Bojan
 *  Thread Starter [RebeccaEmma](https://wordpress.org/support/users/rebeccaemma/)
 * (@rebeccaemma)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/cutting-off-numbered-lists/#post-5608867)
 * Hi Bojan!
 * Thanks for the prompt response – much appreciated.
 * I am having a little bit of trouble with exactly how I am meant to use the custom.
   css file.
 * I added in the code you suggested by simply copying and pasting it into the custom.
   css file but it has not altered anything. Evidently I’m doing it incorrectly…
   so sorry to ask such elementary questions. Any insight you can offer would be
   valuable.
 * Thank you in advance and happy christmas!
 * Bec 🙂
 *  [Bojan Radonic – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support4/)
 * (@wpmudev-support4)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/cutting-off-numbered-lists/#post-5608895)
 * Hey there Bec, Merry Christmas!
 * If you’re using the plugin I mentioned above ([http://wordpress.org/plugins/simple-custom-css](http://wordpress.org/plugins/simple-custom-css)),
   once the plugin is installed and activated you can add the code to Appearance
   >> Custom CSS [http://screencast.com/t/YVCU7zLb](http://screencast.com/t/YVCU7zLb).
 * If you’re using child theme, the code should be inserted at the bottom of the
   child theme style.css.
 * Hope this makes sense 🙂
 * Cheers,
    Bojan
 *  Thread Starter [RebeccaEmma](https://wordpress.org/support/users/rebeccaemma/)
 * (@rebeccaemma)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/cutting-off-numbered-lists/#post-5608944)
 * Hi again Bojan,
 * I’ve done as you have suggested and added the code via the plug in you suggested…
   however it hasn’t changed the numbers being cut off.
 * Is it meant to take up three lines?
    Is the code suppose to be between the /**/
   or is that meant to be deleted?
 * I’m not sure what else to do now!
 * Thanks so much for your time 🙂
 * Bec
 *  [ola2014](https://wordpress.org/support/users/ola2014/)
 * (@ola2014)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/cutting-off-numbered-lists/#post-5608945)
 * hey can you post how you pasted the code,and maybe try a different browser because
   i am seeing visible numbers from mozilla
 *  [ola2014](https://wordpress.org/support/users/ola2014/)
 * (@ola2014)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/cutting-off-numbered-lists/#post-5608946)
 * plus thats a very cool list
 *  [bdbrown](https://wordpress.org/support/users/bdbrown/)
 * (@bdbrown)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/cutting-off-numbered-lists/#post-5608947)
 * Hi RebeccaEmma. You have the code in the right place. Since the code has a leading/*
   the site thinks it’s a comment so it’s not active. Just remove the leading /*
   and it should work. Also I think you may need to increase the padding a bit:
 *     ```
       .content .page {
         padding-left: 15px;
         }
       ```
   
 *  Thread Starter [RebeccaEmma](https://wordpress.org/support/users/rebeccaemma/)
 * (@rebeccaemma)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/cutting-off-numbered-lists/#post-5608948)
 * Hi
 * Haha – thank you.The list will be a work in progress!!
 * Okay, so my usual browser is Chrome but I have also tried to view it using Internet
   Explorer, Torch, Safari (on iPad) and the default browser on my android phone–
   all showing the same issue.
 * The issue is that as the numbering progresses down the list, the first number
   is cut off. For example, number 100 on the list displays as “00” – it is missing
   the 1.
 * I have tried pasting the code in a variety of ways but none of it has worked.
 * Effort 1:
 * > .content .page {
   >  padding-left: 3px; }
 * Effort 2:
 * > /* .content .page {
   >  padding-left: 3px; } */
 * Effort 3:
 * > /* .content .page {
   >  padding-left: 3px; }
 * Effort 4:
 * > .content .page { padding-left: 3px; }
 * I don’t have a clue what I’m doing though!!
 * Thanks so much in advance for helping me 🙂
 * Bec
 *  Thread Starter [RebeccaEmma](https://wordpress.org/support/users/rebeccaemma/)
 * (@rebeccaemma)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/cutting-off-numbered-lists/#post-5608949)
 * Hi bdbrown,
 * I just tried what you suggested but to no avail. I’m trying to download Jing 
   so I can share a screenshot with you.
 * Thanks so much
 *  Thread Starter [RebeccaEmma](https://wordpress.org/support/users/rebeccaemma/)
 * (@rebeccaemma)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/cutting-off-numbered-lists/#post-5608950)
 * Hi again,
 * This is how I have pasted it: [http://screencast.com/t/UPAvx7CI](http://screencast.com/t/UPAvx7CI)
 * Is this correct?
 * Bec
 *  [bdbrown](https://wordpress.org/support/users/bdbrown/)
 * (@bdbrown)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/cutting-off-numbered-lists/#post-5608951)
 * #1 and #4 above will work but this is what I’m still seeing on your site:
 *     ```
       /* .content .page {
       padding-left: 3px;
       }
       ```
   
 * Also, to help with post processing, please enclose your code samples in code 
   backticks. Easy way to do this is type your text in your post, press Enter 3 
   or 4 times to put in blank lines, enter your code, then Enter 3 or 4 times again.
   Then, go back to your code, highlight it all, then click the “code” button above
   the editor. See the Posting Code section in the [Forum Documentation](http://codex.wordpress.org/Forum_Welcome)
   for reference.
 *  Thread Starter [RebeccaEmma](https://wordpress.org/support/users/rebeccaemma/)
 * (@rebeccaemma)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/cutting-off-numbered-lists/#post-5608952)
 * Noted. Thanks for the tip – this thread is my first time using these forums so
   please accept my apologies.
 * I have the code entered like this:
    [http://screencast.com/t/UPAvx7CI](http://screencast.com/t/UPAvx7CI)
 *  [bdbrown](https://wordpress.org/support/users/bdbrown/)
 * (@bdbrown)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/cutting-off-numbered-lists/#post-5608953)
 * No apologies needed; we’re all learning here. The code is entered correctly but
   I’m still not seeing the change on your active site. Are you sure you’re working
   on your active site and not a test version? Are you using a caching plugin? Or
   do you know if your host is doing any caching?
 *  Thread Starter [RebeccaEmma](https://wordpress.org/support/users/rebeccaemma/)
 * (@rebeccaemma)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/cutting-off-numbered-lists/#post-5608954)
 * Hi again.
 * It seems to have worked on both my iOS tablet and Android phone browsers – it
   is now displaying correctly.
    But the problem remains with computer browsers.
 * I am not sure how to access a test version of my site, so I would fairly confidently
   say I am working on my active site.
 * I’m not sure what a caching plugin is but I’ve looked through my list of plugins
   and none of them mention anything like that.
    I’m not sure how I’d tell if my
   host is doing any caching… in the previous screenshot I provided I do see an 
   option along the top menu to “flush cache” which I have selected a couple of 
   times now.
 * Any other ideas?
 *  Thread Starter [RebeccaEmma](https://wordpress.org/support/users/rebeccaemma/)
 * (@rebeccaemma)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/cutting-off-numbered-lists/#post-5608955)
 * It might be worth noting as well, the second issue I had was also to do with 
   adding code to my custom.css
 * As you can see, the menu header is blue with white font (IE “The List”). I want
   to change the font and background colour. I’ve searched the forums and found 
   the following code:
 *     ```
       #nav-topbar .nav li a { color: red; }
       #nav-topbar .nav li > a:hover,
       #nav-topbar .nav li:hover > a,
       #nav-topbar .nav li.current_page_item > a,
       #nav-topbar .nav li.current-menu-item > a,
       #nav-topbar .nav li.cu
       #nav-topbar .nav li.current-post-parent > a { color: blue; }rrent-menu-ancestor > a,
       ```
   
 * And for background:
 *     ```
       #nav-header.nav-container { background-color: red; }
       @media only screen and (min-width: 720px) {
       	#nav-header .nav ul { background-color: red; }
       }
       ```
   
 * However I can’t get this code to work either!
 * I think as soon as I can work out why none of the codes will apply, my problems
   will all be solved!

Viewing 15 replies - 1 through 15 (of 18 total)

1 [2](https://wordpress.org/support/topic/cutting-off-numbered-lists/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/cutting-off-numbered-lists/page/2/?output_format=md)

The topic ‘Cutting off numbered lists’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/hueman/3.7.27/screenshot.png)
 * Hueman
 * [Support Threads](https://wordpress.org/support/theme/hueman/)
 * [Active Topics](https://wordpress.org/support/theme/hueman/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/hueman/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/hueman/reviews/)

 * 18 replies
 * 5 participants
 * Last reply from: [Amin – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support2/)
 * Last activity: [11 years, 4 months ago](https://wordpress.org/support/topic/cutting-off-numbered-lists/page/2/#post-5608983)
 * Status: not resolved