Gray background on event list vcard area on mobile

[Rob]

Have a look at any of the events at https://www.westernlegendsroundup.com/events/map/?tribe-bar-date=2017-08-26 at any viewport size above 768px wide.

Now go to 768px wide or lower.

See the difference? There’s a light gray background that suddenly appears behind the date and venue text where it used to be light blue on dark blue background.

Before I made some changes, at this viewport size the text was white on gray. I had to do kind of a ridiculous media query to get it to be black text + red links on the light gray background. See code below.

What I want to know is:

1) Why did you guys decide to switch color schemes at 768px wide? Why not leave them be?
2) Isn’t there a better way to do the tweaks than the code below? Like in the settings, shouldn’t there be a way to choose the styling of mobile venue information? This just seems really backward to me.

@media only screen and ( min-width: 0px) and ( max-width: 768px ) { 
    /* Invert text and link colors on events page venue details to contrast against gray background*/
    .tribe-updated.published.time-details, .tribe-events-venue-details, .tribe-event-schedule-details {
        color: #000;
    }

    div.tribe-events-event-meta.vcard.location > div.tribe-events-venue-details > a {
        color: rgb(147, 0, 0);
    }

    div.tribe-events-event-meta > div > div.tribe-events-venue-details > a:nth-child(1) {
        color: rgb(147, 0, 0);
    }

  /* This only works if I'm referencing a specific post's ID selector, but I don't want to have to do this for every post ID that could exist */
  #post-6270 > div.tribe-events-event-meta.vcard.location > div.tribe-events-venue-details > a {
        color: rgb(147, 0, 0);
    }

    .tribe-events-list .tribe-events-loop .tribe-events-event-meta .event-is-recurring {
        color: #000;
    }

    div.tribe-events-event-meta.vcard.location > div.published.time-details > span.tribe-event-date-start, div.tribe-events-event-meta.vcard.location > div.published.time-details > span.tribe-event-date-end {
        color: #000;
    }
}

[Cliff]

Hi, Rob.

I’d suggest removing all of that custom CSS and add this custom CSS instead:

body.post-type-archive-tribe_events #tribe-geo-results .tribe-event-featured .tribe-events-event-meta {
background-color: #0ea0d7;
}
body.post-type-archive-tribe_events .tribe-events-loop .tribe-events-event-meta {
border: none;
}
body.post-type-archive-tribe_events .tribe-events-list .tribe-events-venue-details {
border-top: none;
}

Please let me know how this goes for you.

[Rob]

Thanks. Ultimately what worked was

.tribe-events-loop .tribe-events-event-meta {
    background: #0ea0d7;
    border: none;
}

.tribe-events-list .tribe-events-venue-details {
    border-top: none;
}

[Cliff]

I’m glad you’re all sorted now. Thanks for the update.

[Author]

Posts