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 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
.content .page {
padding-left: 3px;
}
This should make numbers not being cut off. Hope this helps 🙂
Best regards,
Bojan
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 🙂
Hey there Bec, Merry Christmas!
If you’re using the plugin I mentioned above (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.
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
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
hey can you post how you pasted the code,and maybe try a different browser because i am seeing visible numbers from mozilla
plus thats a very cool list
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;
}
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
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
Hi again,
This is how I have pasted it: http://screencast.com/t/UPAvx7CI
Is this correct?
Bec
#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 for reference.
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
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?
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?
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!
