css styling list view

[Suzanne]

Hi,
I’m working on a new website. In the list view of the calendar, the post stretches it’s width. I cannot find the css element to change this. Could you please take a look? http://kade.nl.testbyte.nl/agenda/aankomend/
Thanks.

[Rob]

Hi Suzanne. I can get our dev Jonah to chime in here; but what are you looking to do, exactly? Do you just want the main column to extend all the way across / overlapping the sidebar? Or something more? Let me know and we can take a look as needed from there.

[Suzanne]

In the single post view of an event, the styling is exactly how it’s supposed to be. However, on the list view page the width is wider than it should be.
I want the main column to look exactly like it does on the other pages. There should be a 17px margin on the left side of the column.

[Suzanne]

Just found out this also is the case with the monthly calendar:
This look fine: http://kade.nl.testbyte.nl/agenda/maand
But this doesn’t: http://kade.nl.testbyte.nl/agenda/2012-02
Funny thing: the styling is only wrong when you get on the page by using the dropdown menu on top of the page. If you use the next/pev links, it is fine.

[Jonah]

Hi Suzanne, you’ll need to specifically target the events list page and adjust some of your CSS code to get things looking good. You can use some conditional code to target the events list page and apply a special class if that would help. This will help you with that:


if(tribe_is_month()) { //Calendar Grid

} else if(tribe_is_event() && !tribe_is_day() && !is_single()) { //Event List

} else { //Single Event

}


[Suzanne]

Thanks for your reply. Do I just add this to the style sheet? I tried that and didn’t work.

The styling is still messed up when I go to another month by clicking on a month using the dropdown. If a month doesn’t have any events the styling stays intact.

The main events page is also not right:
OK: http://kade.nl.testbyte.nl/agenda/maand
NOT OK: http://kade.nl.testbyte.nl/agenda/

[Rob]

Hey Suzanne, where did you add this specifically?

[Jonah]

Hey Suzanne,

Nevermind the above code. This is actually just a simple CSS conflict. You have in your themes CSS:


.post {
max-width: 900px;
margin: 0 0 0 22px;
}


Which controls the width and margin for the right hand column. In the events CSS we use:


.events-archive .hentry {
margin: 0;
padding: 0 0 15px 0 !important;
}


And because of specificity rules, by using two classes in the CSS declaration, this trumps your theme styling and sets a 0 margin on the right column div. Two things you could try here…

1. Use a higher specificity for your .post styling by adding an ID selector like so:


#main .post {
max-width: 900px;
margin: 0 0 0 22px;
}


That will trump the events.css styling.

2. Modify the events.css file (make a duplicate copy in an ‘events’ folder in your theme and set the appropriate margin for .events-archive .hentry

I hope that helps.

[Suzanne]

Thanks so much, problem solved!

[Rob]

Excellent to hear! Thanks for confirming, Suzanne. If you need anything else in the future just let us know, and we’ll do what we can to assist.

[T.J.]

I’m having sort of the inverse problem,

I needed to constrain the calendar’s contents to a column of a max-width. This was fine for the calendar and list view because I could modify the CSS for the tribe-events-content ID. I’m having problems with the individual posts still trying to fill the entire page, since each post has a unique ID. (Same with the by-venue view)

I’m trying to work this solution into something that helps me (and will report back if and when I have success) but if someone has a more direct idea before I get there, I’d love to hear it.

Thanks!

[Jonah]

Hey TJ, what about just tapping into the .events-single body class and applying the necessary styling for your single events through that?

[T.J.]

I would like to shake your hand, Jonah. I’ve been banging my head against the wall on this all day, twiddling with classes, cursing specificity, and so on. That appears to have worked quite well.

[Rob]

Thanks Jonah!

Awesome to hear that did the trick, T.J. I’m going to close this out since it’s a rather old issue to begin with but if you have any other problems just fire up a new thread and we’ll take a look from there. Cheers!

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts