Help with Styling of Events List Widget

[Steve]

I’m having some issues figuring out the CSS changes required to clean up the List Widget that I currently have on the home page at http://airdownthere.com.
First, there is a bullet showing up in the top right area of the photo to the left of the widget – you’ll see it when the page loads.
Second, I would like to get the event date tucked up under the title of the event. Right now, the spacing does not clearly identify what event is associated with which date.
Any help or ideas?

[Josh]

Hey Steve,

Thanks for reaching out to us!

The site looks great! I’ve never been diving but it’s definitely on the bucket list 🙂

For the first issue, I believe this may be a remnant of the “Local Diving Opportunities & News” section images. The images are wrapped in a slider markup that includes an unordered list. I believe that the bullet showing is a remnant of that unordered list and is displaying prior to the slider CSS loading. We can verify this by checking to see if the bullet remains after temporarily disabling the calendar widget on the home page.

For the spacing of event details, you can clear that up by targeting the “.tribe-events-adv-list-widget h4” and reducing the bottom margin on that element. Additionally, you could also increase the font size of the same “h4” element to give the title a little more weight in comparison to the date below.

Let me know if this helps clean things up for you.

Thanks!

[Josh]

Hello Steve,

It’s been a while since we’ve heard from you. We like to close tickets after they’ve been inactive for a while. If you have any further questions, please don’t hesitate to open a new ticket.

Thanks!

[Author]

Posts