Docs

[jillvan]

Hello,

On my blog page /blog, I want to hide all meta data. Is that possible?

On each post page, I want users to be able to see the meta data, though I’d like to remove the icons next to author, date, category. Is that possible?

Most importantly, back on the /blog page, some of the titles are running off the screen on mobile. I’m assuming I need to add responsive text somehow? How would I do this?

Kind regards,
Jill

[jillvan]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.blog .p-meta,
.p-meta i {
    display: none;
}
@media (max-width: 480px){
   .blog .x-iso-container-posts.cols-3 h2.entry-title a {
       font-size: 28px;
   } 
}

Hope it helps 🙂

[jillvan]

Thank you so much! That worked perfectly on mobile. Is there a way to do this for desktop as well?

Also, I realized that on each post page, some of the titles also are running off the page. Is it possible to fix that too?

Kind regards,
Jill

[jillvan]

This reply has been marked as private.

[Paul R]

Hi,

To fix it, you can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 767px) {
   body .entry-title {
        font-size: 35px;
    }
}

@media (max-width: 480px) {
   body .entry-title {
        font-size: 27px;
    }
}

Hope that helps.

[jillvan]

That worked! Thank you!

I just need to fix these two issues for desktop as well. The CSS above (.blog .p-meta,
.p-meta i {
display: none;
}
@media (max-width: 480px){
.blog .x-iso-container-posts.cols-3 h2.entry-title a {
font-size: 28px;
}
} ) worked for mobile, not on desktop:

> On my blog page /blog, I want to hide all meta data. Is that possible?<

>On each post page, I want users to be able to see the meta data, though I’d like to remove the icons next to author, date, category. Is that possible?<

[Nabeel A]

Hi again,

1. To remove the meta data on blog, just add the following code in your Customizer:

.blog .p-meta {
    display: none !important;
}

2. To remove the icons on post pages, you can use this code:

.single-post .p-meta i:before {
    content: '' !important;
}

Let us know how this goes!

[jillvan]

Hi there. It’s working well on mobile, but still not on desktop.

So far, this is the code I’ve inputted:

.blog .p-meta,
.p-meta i {
display: none;
}
@media (max-width: 480px){
.blog .x-iso-container-posts.cols-3 h2.entry-title a {
font-size: 28px;
}
}

.blog .p-meta {
display: none !important;
}

@media (max-width: 767px) {
body .entry-title {
font-size: 35px;
}
}

@media (max-width: 480px) {
body .entry-title {
font-size: 27px;
}
}

.single-post .p-meta i:before {
content: ” !important;
}

Thank you.

[Lely]

Hello Jill,

Please check this custom CSS:

@media (max-width:  767px) {
	.blog .entry-title a, .single .entry-title {
		line-height: 1;
}

You have missing closing curly brace. This will make all CSS below it to be inside 767 media query. That is why it is not working on desktop.
Update to this:

@media (max-width:  767px) {
	.blog .entry-title a, .single .entry-title {
		line-height: 1;
}
}

Hope this helps.

[jillvan]

This reply has been marked as private.

[Rad]

Hi there,

I just tried that CSS and it’s working. The issue is that you have other existing CSS that are invalid, for example, this one has no proper closing bracket.

@media (max-width:  767px) {
	.blog .entry-title a, .single .entry-title {
		line-height: 1;
}

Any CSS added below it, especially another media query will not work.

Please fix those CSS 🙂 before applying the suggested CSS> Thanks!

[jillvan]

Gotcha. I think I fixed it. It is working now, across both desktop and mobile. I really appreciate your help. Thanks!!

[Rupok]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts