Problem with font size in blog

  • Resolved tonidegroof

    (@tonidegroof)


    1 year, 10 months ago

    On the front page of my website I am experimenting with a blog grid and albums. Yesterday I had a problem with the font size of the metadata, they were very very small. The user “tugbucket” solved that problem. I can now change the font size he author name,categories and comment, but this does not work for the date. The font size of the date was to big, like 20px and that did not change, like you can see on the front page. I work with a theme called Aurel.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • You can do something like this. The value here is 1em. This is relative to your default font size. If you make it .5em for example, it will make the date font size half of your default font size, if you make it 2em, it will double it.:

    .premium-blog-post-time.premium-blog-meta-data {
    font-size: 1em !important;
}

    Or this, where you can simply state a value in pixels. Change 12px to whatever you want:

    .premium-blog-post-time.premium-blog-meta-data {
    font-size: 12px !important;
}

    Let me know how you got on.

    You will see the !important tag, you need this or else the code is being overwritten somewhere else. It’s not good practice to rely on !important but this is a quick fix and all the time I have to help.

    Good luck.

    • This reply was modified 1 year, 10 months ago by pichichi.
    • This reply was modified 1 year, 10 months ago by pichichi.
    Thread Starter tonidegroof

    (@tonidegroof)

    It worked, thanks a lot. I am familiar with css but how do you find out the names of the elements you want to change? Has it something to do with inspecting the code of the website in your browser?

    Yeah, pretty much. In Chrome, for example, the process is:

    • Right click and select “Inspect” to open developer tools
    • Right click on the element you want to find out more about and click “inspect”to get info on that element
    • You will see a css class pop up at your mouse position, this could be the class you are looking for.
    • I say could, becauce it is often then look at the Elements and Styles tabs of Developer tools and select parent and child DOM elements of the initial target to ensure you are targeting the correct element.
    • Using the Styles tab as a playground to test edits of CSS is a very fast way to test changes on the fly.

    Glad you sorted it!

    • This reply was modified 1 year, 10 months ago by pichichi.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Problem with font size in blog’ is closed to new replies.