Hide images in list view only

[tobak]

My site uses three types of event display: List, Photo and the single event page. I want to hide (with CSS preferably) the featured image of an event on the list view only. However, when hiding the image in list view, it also disappears from the photo view. I figured this is because they use the same CSS class, but the single event view page uses the same class and that image is still here! What gives?

[tobak]

Okay, things just got a bit weirder. The images in photo view are only hidden in full screen. If you look at the page in mobile or tablet view, they come back.

http://www.tobaksgaarden.com

[George]

Hey @Tobak,

Have you added custom code already to try and hide the images in photo view or otherwise? If so, please remove this custom code.

What I would recommend doing instead is just pasting the following CSS into the bottom of your theme’s style.css file:


#tribe-events-content.tribe-events-list .tribe-events-event-image {
display: none;
}

☝️ Let me know how this goes for the first main issue of hiding images on List View but not Photo View. We can address further things from there! 😀

— George

[tobak]

Hi George.

The CSS you posted is essentially the same as I used. I just tested, and the results are the same: Featured images are gone from list view, but also from photo view.
99% of my customization so far is CSS, so I tried simply deleting the styles I made myself. No changes. I’m really at a loss here. The only PHP I added is standard stylesheet integration for my child theme (in functions.php in my child theme folder). It’s maybe 3 lines of code copied from wordpress.org, so I figure that’s not the culprit.

[George]

Hey @Tobak,

I checked out your site again and see the images showing for BOTH list view and photo views.

Please remove all other custom CSS related to the featured images here; then add the CSS I shared to the bottom of your theme’s style.css file; and then leave it in place and let me know when you’ve down this. I will take another look and try to recommend something additional to help refine this behavior.

Thank you!
George

[tobak]

Hi George.

The CSS is in place now.

[George]

Thank you!

Instead of the CSS I originally shared, I would recommend replacing it with this CSS:


body.events-list #tribe-events-content .tribe-events-event-image {
display: none;
}


Let me know if this helps! If not, leave the CSS in place and I will take another look.

— George

[tobak]

Hi George.

It seems to work now, thanks. Can you explain why the second bit worked? They seem very similar.

[tobak]

EDITED:

So I had some weird issues, first it worked, then it didn’t. Moving the CSS you provided to the top of the style sheet fixed it, but I’m a little worried there will be other issues later. Any idea what might be interfering here?

• This reply was modified 7 years, 11 months ago by tobak.

[tobak]

The culprit appears to have been my @font-face tag. Either I was using it incorrectly, or it doesn’t play nice with certain other types of CSS. Either way, dumping @font-face to the bottom of the style sheet solved this issue as well as a bunch of others.

Thanks again for the help.

[George]

😀

[Author]

Posts