WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] change font size in lists (12 posts)

  1. 24lover
    Member
    Posted 3 years ago #

    hi everyone,

    i would like to know how to make my font size bigger in lists. At the moment the font size in lists are smaller than font size of content, to the point where it's illegible!

    please help!

  2. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    Go to your dashboard locate Appearance > Editor in most cases the very first file that comes up after you click on Editor link will be style.css. Now all you need to do is to locate your stylesheet's UL css.

    Example:

    ul li {
        font-size: 12px;
    }

    You can also remove the font size from you list and keep the same size as your body (content).

    Emil

  3. 24lover
    Member
    Posted 3 years ago #

    hi emil
    thanks for your reply.

    i don't have a code for font-size in my ul li.....

    ul li {
    /* height: 1%; */
    list-style-type: none;
    margin: 0 0 5px;
    padding: 0 0 0 15px;
    line-height: 18px;
    }

    i do have that?

  4. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    All right, is there any other UL in your stylesheet, someplace else, hidden around some codes? Do you mind posting the site here?

    If you add

    ul li {
        /* height: 1%; */
        list-style-type: none;
        margin: 0 0 5px;
        padding: 0 0 0 15px;
        line-height: 18px;
        font-size: 12px;
    }

    12px is just a test, increase/decrease how you like it. However if that specific ul li is styled this will not change that size, but it will globally around your site.
    Emil

  5. 24lover
    Member
    Posted 3 years ago #

    hi emil,
    i did try that before but it didn't change the size.

    i have ul li all over my style.css. i'll post up where they all are:

    /* defination lists */
    dl { margin: 20px 0; }
    dt { font-size: 1em; text-transform: uppercase; }
    dd { margin: 0 0 20px; }
    
    /* lists */
    ol { margin: 10px 0 10px 25px; }
    ol li { margin: 0 0 15px 0; }
    ul { 
    
    	margin: 10px 0;
    	/* Edited by Sanjay Hadiya	*/
    
    	/* Ends */
    }
    ul li {
    /* height: 1%; */
    list-style-type: none;
    margin: 0 0 5px;
    padding: 0 0 0 15px;
    line-height: 18px;
    }
    
    .post ul, .post li{
    	font: normal normal normal 94%/150% Candara, "Trebuchet MS", Trebuchet, sans-serif; color: #333;
    }
    div#content-article ul, div#content-article ol {
    list-style: none;
    margin: 0;
    padding: 0 10px;
    }
    div#content-article ul li, div#content-article ol li {
    margin: 0 10px;
    padding: 4px 15px;
    }
    div#content-article ol { margin: 0 20px; }
    div#content-article ol li { list-style: decimal; padding: 4px 5px;}
    div#content-article ul li {
    list-style: none;
    background: url(i/arrow-03.gif) 0 10px no-repeat;
    }
    div#content-article ul li a, div#content-article ol li a {
    color: #3D81EE;
    text-decoration: none;
    border-bottom: 1px solid #ccc;
    }
    div#content-article ul li a:hover, div#content-article ol li a:hover {
    text-decoration: none;
    border-bottom: 1px solid #ccc;
    color: #3D81EE;
    }

    my website is vcestudyguides.com but i'm using a different theme for that so you won't be able to see the problem :(

  6. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    Here it is:

    .post ul, .post li{
    font: normal normal normal 94%/150% Candara, "Trebuchet MS", Trebuchet, sans-serif; color: #333;
    }

    change that to:

    .post ul, .post li {
        color: #333;
        font-family: Candara, "Trebuchet MS", Trebuchet, sans-serif;
        font-weight: 400;
        font-size: 12px;
    }

    What we did here:

    • changed font to font-family
    • font weight normal to 400. 400 = normal it's better that way
    • font size was 94%/150% - let's make that 12px instead

    That should be it,
    Emil

  7. 24lover
    Member
    Posted 3 years ago #

    thank you for the emil!

    i used the code you gave me but unfortunately the font size in nav bar changes as well!......is there anything i can do?

  8. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    That means that you nav bar is wrapper inside of .post ul or the nav bar doesn't have any font-size at all. Please give me the css for nav bar and I will take a look.

    Thanks,
    Emil

  9. 24lover
    Member
    Posted 3 years ago #

    /* nav */
    div#nav {
    background:#8fd0e0;
    margin: 20px 5px;
    padding: 10px 0;
    text-align: center;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    }
    
    div#nav ul { margin: 0; padding: 0;}
    div#nav li {
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position:relative;
    }
    
    div#nav ul li a {
    
    font: normal normal normal 1.2em/normal Constantia, Arial, Calibri, sans-serif;
    color: #333;
    padding: 0 10px;
    margin: 0;
    text-decoration: none;
    text-transform: uppercase;
    }
    
    div#nav ul li a:hover { color: #FFF; }
    
    div#nav ul li ul{
    	display:none;
    }
    
    div#nav ul li:hover ul{
    	display:block;
    	position:absolute;
    	top:1.2em;
    	left:0px;
    	background:#8FD0E0;
    	padding-top:20px;
    
    }
    
    div#nav ul li ul li {
    	display:block;
    	padding-bottom:10px;
    	font-size:0.7em;
    	color:#FFF;
    	background:#8FD0E0;
    	z-index:100;
    }
    
    div#nav ul li.current_page_item a:hover  a{
    	color:#FFF;
    	/*background:#66cccc;*/
    
    }

    thanks a lot emil! you are quite the expert

  10. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    div#nav ul li a {
        font-family: Constantia, Arial, Calibri, sans-serif;
        font-size: 12px;
        font-weight: 400;
    }

    I am bit tired, but this should be it.

    Good Night,
    Emil

  11. 24lover
    Member
    Posted 3 years ago #

    thank you very much emil :)

  12. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    you're very welcome

Topic Closed

This topic has been closed to new replies.

About this Topic