Support » Fixing WordPress » how to change font size for bulleted text?

  • hello,

    i am using the twenty-twelve theme. i seem to like everything abt it so far, except some weird thing is happening

    why is the text i decided to bullet appear to be bigger in font size than the normal text content?please see what i mean here
    http://travelmolecule.com/when-to-visit-iceland/

    i believe it has something to do with ul and li from my googling online but i still cannot figure out where to tweak within the .css file to get it to the way i want. my goal is to make the text in bullets to be the same exact font size as the rest of the text in the blog post. (i have no idea what’s the size of my text in the content of blog post either 🙁

    the .css code, which i suspect affects this, is seen below

    ————————-
    }
    .main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
    border-bottom: 1px solid #ededed;
    border-top: 1px solid #ededed;
    display: inline-block !important;
    text-align: left;
    width: 100%;
    }
    .main-navigation ul {
    margin: 0;
    text-indent: 0;
    }
    .main-navigation li a,
    .main-navigation li {
    display: inline-block;
    text-decoration: none;
    }
    .main-navigation li a {
    border-bottom: 0;
    color: #6a6a6a;
    line-height: 3.692307692;
    text-transform: uppercase;
    white-space: nowrap;
    }
    .main-navigation li a:hover,
    .main-navigation li a:focus {
    color: #000;
    }
    .main-navigation li {
    margin: 0 40px 0 0;
    margin: 0 2.857142857rem 0 0;
    position: relative;
    }
    .main-navigation li ul {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    z-index: 1;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    }
    .main-navigation li ul ul {
    top: 0;
    left: 100%;
    }
    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul,
    .main-navigation .focus > ul {
    border-left: 0;
    clip: inherit;
    overflow: inherit;
    height: inherit;
    width: inherit;
    }
    .main-navigation li ul li a {
    background: #efefef;
    border-bottom: 1px solid #ededed;
    display: block;
    font-size: 11px;
    font-size: 0.785714286rem;
    line-height: 2.181818182;
    padding: 8px 10px;
    padding: 0.571428571rem 0.714285714rem;
    width: 180px;
    width: 12.85714286rem;
    white-space: normal;
    }
    .main-navigation li ul li a:hover,
    .main-navigation li ul li a:focus {
    background: #e3e3e3;
    color: #444;
    }
    ———————————

    please help? i am a complete newbie/noob to wordpress

    thank you in advance

Viewing 8 replies - 1 through 8 (of 8 total)
  • Just the opposite is happening.

    Look for:

    article.format-aside p {

    That line is making the font size of paragraphs inside of “asides” smaller.

    Thread Starter wpnoob2014

    (@wpnoob2014)

    thanks Tanath

    i found what you mean

    }
    article.format-aside p {
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1.846153846;
    color: #4a5466;
    }

    That line is making the font size of paragraphs inside of “asides” smaller.
    but what do you mean by asides?

    actually, i like the font size of the smaller blog post content (the non-bulleted sections), and would like to apply that throughout my website for all text written (except headings). how do i do that?

    also, i dont really understand how this 0.XXXXrem thing work. what does rem mean?

    Google rem font size
    😉

    I wouldn’t mess with the size of the paragraph text, it’s already pretty small.

    If you must, it’s controlled by:

    .entry-content p, .entry-summary p, .comment-content p, .mu_register p {

    Find that and add the font-size parameter

    Thread Starter wpnoob2014

    (@wpnoob2014)

    ok, i figured it out!!! thank you so much tanath!
    i didnt change font size throughout webpage to become smaller.
    i only make the blog subpage to look uniform (in terms of size)

    a follow-up question, how do i modify the font size of the second line below “A roaming particle…”? i believe it’s called the site description and is denoted as h2 in .css file? however, when i went in there and tweak the font size, it doesnt work. am i missing something here? or probably not editing in the right place… please advice!

    Travel Molecule
    A roaming particle with a curiosity for the world

    the above statement appear in the top left corner of each of my domain pages

    .site-header h2 {

    It currently has 16px and 0.9xxxrem.

    The css also has another value for it for if you print out the web page, which is set at 10pt.

    Thread Starter wpnoob2014

    (@wpnoob2014)

    thanks Tanath

    ok. i found what you are saying, which i suspect is the place to change too.

    but changing the bolded below does nothing to the appearance of the “A roaming particle with a curiosity for the world” on my webpage.

    is some other code in the .css preventing the font size change from happening?

    .site-header h1 a:hover,
    .site-header h2 a:hover {
    color: #21759b;
    }
    .site-header h1 {
    font-size: 24px;
    font-size: 1.714285714rem;
    line-height: 1.285714286;
    margin-bottom: 14px;
    margin-bottom: 1rem;
    }
    .site-header h2 {
    font-weight: normal;
    font-size: 16px;
    font-size: 0.928571429rem;
    line-height: 1.846153846;

    color: #757575;

    ———————————-

    @media print {
    body {
    background: none !important;
    color: #000;
    font-size: 10pt;
    }
    footer a[rel=bookmark]:link:after,
    footer a[rel=bookmark]:visited:after {
    content: ” [” attr(href) “] “; /* Show URLs */
    }
    a {
    text-decoration: none;
    }
    .entry-content img,
    .comment-content img,
    .author-avatar img,
    img.wp-post-image {
    border-radius: 0;
    box-shadow: none;
    }
    .site {
    clear: both !important;
    display: block !important;
    float: none !important;
    max-width: 100%;
    position: relative !important;
    }
    .site-header {
    margin-bottom: 72px;
    margin-bottom: 5.142857143rem;
    text-align: left;
    }
    .site-header h1 {
    font-size: 21pt;
    line-height: 1;
    text-align: left;
    }
    .site-header h2 {
    color: #000;
    font-size: 10pt;
    text-align: left;

    It changes it, you have to change the rem one, too:

    .site-header h2 {
    font-weight: normal;
    font-size: 18px;
    font-size: 1.2rem;
    line-height: 1.846153846;
    color: #757575;

    I don’t know much about the rem value myself, I’m not sure why it needs so many numbers, it works fine with just 2, as far as I can see.

    Thread Starter wpnoob2014

    (@wpnoob2014)

    thank you Tanath

    yes, the rem value boggles my mind. i have no idea how it works even after reading abou it online. :(((

    but your suggestion work. thank you so much again for willing to help a newbie like me. much appreciated.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘how to change font size for bulleted text?’ is closed to new replies.