Docs

[Naturalife]

I am checking my site’s mobile view and I noticed that when I go to the blog, the recent posts article titles on mobile view are huge and I am not sure why. You can view it here: naturalife.org/blog

Is there code I can insert to edit the size?

I also have another question I would like to ask in order to avoid opening several forum posts.

What code would I need to insert to add a colored dotted underline to the links strictly in the posts / article content?

Thanks!

[Jade]

Hi there,

Please add this in the CSS Customizer:

@media (max-width: 480px) {
    body.blog .entry-title a, .single .entry-title {
        font-size: 1em;
    }
}

Hope this helps.

[Naturalife]

Thanks for the reply.

That worked but now the article title is quite small for some unknown reason. It looks great in the blog list but when I click to view the actual article the title appears to be quite small in mobile view.

Any idea what needs to be changed?

Thanks!

[Joao]

Hi There,

Can you please provide the URL so we can have a look?

Thanks,

Joao

[Naturalife]

Sure thing:

http://naturalife.org/natural-remedies/health-benefits-eleuthero

[Nabeel A]

Hi there,

Please add the following code in your Customizer:

@media screen and (max-width: 480px) {
body.blog .entry-title a, .single .entry-title {
    font-size: 23px !important;
}
}

Change the size as per your need. Let us know how this goes!

[Naturalife]

Even after clearing the cache this didn’t seem to work unfortunately.

Any other suggestions?

Thanks

[Naturalife]

This reply has been marked as private.

[Nabeel A]

Hi again,

Please replace the following code:

@media (max-width: 480px) {
    body.blog .entry-title a, .single .entry-title {
        font-size: .8em;
    }
}
}

With this:

@media screen and (max-width: 480px) {
body.blog .entry-title a, .single .entry-title {
    font-size: 23px !important;
}
}

Your code has an extra bracket which is preventing the suggested code to work.

Cheers!

[Naturalife]

Ok great that worked thank you!

One last question:

I noticed that the line spacing for the article titles is larger in the blog view: naturalife.org/blog

Compared to: http://naturalife.org/natural-remedies/health-benefits-eleuthero

Again this is on the mobile view.

So how can I reduce the line spacing ONLY on the blog list view. I don’t want to increase the spacing on the actual article page.

Thank you for your help.

[John Ezra]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

@media (max-width:480px) {
    .entry-header{
        font-size:0;
    }

    .entry-content {
        font-size:20.2px
    }

    p.p-meta {
        font-size: 17.3114px;
    }

    body.blog .entry-title a {
        line-height:1!important
    }
}

Hope this helps – thanks!

[Naturalife]

This reply has been marked as private.

[Jade]

Hi there,

Please add this CSS:

body.blog .entry-title a {
    display: block;
}

Hope this helps.

[Naturalife]

Unfortunately this still didn’t seem to help. I have taken a screenshot which can be seen here: https://snag.gy/jkZswL.jpg

On the left side, is the header that’s seen on the actual post / article page. This can be seen on: http://naturalife.org/nutrition/9-foods-will-help-sleep-better

On the right side, is the header that’s seen on the blog / article list. As seen on: naturalife.org/blog

Do you have any other suggestions as to how i can fix this?

Also, it may be a coincidence but now the post meta that’s supposed to read “comments” now reads “%s comments” for some reason.

Thank you for your time

[Rad]

Hi there,

1. CSS are not properly formatted, for example,

@media screen and (max-width: 480px) {
body.blog .entry-title a, .single .entry-title {
    font-size: 26px !important;
  	line-height: 1.2 !important;
}
}
.single-post .p-meta {
    text-transform: none;
}

.blog .p-meta {
    text-transform: none;

}
}

.single-post h3{
  font-size: 1.01em !important;

}
}

let’s break it, this is correct, two opening bracket and two closing brackets.

@media screen and (max-width: 480px) {
body.blog .entry-title a, .single .entry-title {
    font-size: 26px !important;
  	line-height: 1.2 !important;
}
}

but why another CSS has two closing

.blog .p-meta {
    text-transform: none;

}
}

Any CSS that you added after the faulty CSS will not work.

2. And since you’re targeting different line height for blog list, then we can break this CSS

@media screen and (max-width: 480px) {
body.blog .entry-title a, .single .entry-title {
    font-size: 26px !important;
  	line-height: 1.2 !important;
}
}

to this,

@media screen and (max-width: 480px) {
.blog .entry-title, .blog .entry-title a {
    font-size: 26px !important;
  	line-height: 1em !important;
}
.single-post .entry-title {
    font-size: 26px !important;
  	line-height: 1em !important;
}
}

Then just change the line-height value to your preference (each for the blog and single).

Thanks!

[Author]

Posts