Docs

[joelm119]

Hi,

I’m using X Theme and The Grid on my blog to display the blog articles. I recently noticed that when I’m scrolling the page on a phone, the title on each blog post disappears and “+READ MORE” appears when I touch the screen to scroll. So when readers are scrolling, they can no longer see what the title of the article is and aren’t likely to click on them.

How can I make it so The Grid doesn’t roll over to this “read more” and just keeps the article name up?

website:

Fun Life Crisis Travel Blog

Thanks.

[Lely]

Hello There,

Thanks for posting in and giving us screenshot. Did you figure this our already? When I check again on mobile, the title is showing and readmore only show when I tap on the grid. Please confirm.

[joelm119]

No, I haven’t been able to figure it out. The problem is exactly as you describe, “read more” shows up whenever I tap on the grid but tapping on the grid is inevitable when you’re scrolling. I want to get rid of this action so the title never goes away and the “read more” never appears.

Is there any way to permanently get rid of the “read more” never have the title disappear?

Thanks.

[Rupok]

Hi there,

Thanks for writing back! You can add this under Custom > CSS in the Customizer.

@media only screen and (max-width: 767px) {
.tg-item .tg-link-button {
  display: none !important;
}
}

Let us know if that works for you.

Cheers!

[joelm119]

I tried the code but that might be even worse. Now, the title is gone and it doesn’t display any writing above the image.

What I’m looking for is to be able to hover over the grid post without anything changing. I don’t want the title to “roll” into a “read more”, I want to disable whatever action is happening when I roll over the grid post and just want it to always look the same with the title over the image.

[Rupok]

Hi there,

Thanks for writing back. Let’s update the code a bit :

@media only screen and (max-width: 767px) {
.tg-item .tg-link-button {
  display: none !important;
}
.sofia .tg-item-content-holder:hover .tg-item-title {
  opacity: 1 !important;
  transform: none !important;
}
}

I have tested the code and it should do the job.

Cheers!

[Author]

Posts