Making Blog Titles Visible on Mobile Devices

BB Theme
1

Greetings guys,
I am using your blog grid format for a page on one of my sites. Everything works fine except I can’t see the rollover state for each photo block in the blog grid on mobile. so the user can’t se what they’re clicking to. They only see the featured image from the grid. Is there anyway to make the title visible always or just on mobile sizes? I’m trying to figure out the best way to attack this within your module. Any thoughts appreciated as always!

2

Hey Jon,

Are you using the Posts module in Gallery layout? Do you think you can share the URL of the site in question so we can take a look?

Ben

3

Hi Ben,
Yes. that’s it exactly. We’ve got a grid of post images with titles that appear on the rollover. You can view the test site at:

http://cathfcu.wpengine.com

4

Hey Jon,

Try using the CSS snippet below and see if it’s what you’re looking for. Just add an extra class to your Posts module and replace fl-show-title with it. You can also play around with the background-color’s alpha value to reduce the transparency.

@media (max-width: 767px) {
  .fl-show-title .fl-post-gallery-link .fl-post-gallery-text-wrap {
    filter: alpha(opacity = 100);
    opacity: 1;
  }
  .fl-show-title .fl-post-gallery-text-wrap {
    background-color: rgba(34,34,34,0.5);
  }
}

Let us know how it goes! :slight_smile:

Ben

5

Ben,
Thanks again for the timely response. That code snippet worked out great. Exactly what I needed. Once again, thanks for the great assist.

Regards,
Jon Cooper
Cooperata LLC

6

Hi Jon,

Thanks for informing us your issue has been resolved, we appreciate it.

Thanks,
Danny