Spacing and Formatting

[Annie Tandy]

On the main page of my calendar the description paragraph is being cut off on the right. Here’s an example: http://www.mykidlist.com/events/

And on the individual events the description paragraph is being cut off on the left: http://www.mykidlist.com/event/thursday-night-out-full-schedule/2015-07-16/

Also, the Details and Venue box towards the bottom of the event has overlapping information from each column.
This one wraps correctly: http://www.mykidlist.com/event/open-bounce/2015-07-17/
In this one the website overlaps the next column: http://www.mykidlist.com/event/little-tykes-time/2015-07-17/

Can you help me so nothing is being cut off or overlapped? Thanks!

[Barry]

Hi Annie,

Unfortunately none of those URLs finish loading when I try to view the pages … a quick check with a third party tool suggests it wasn’t just on my end.

Can you confirm they are working/there isn’t some other problem at work? I’ll be happy to try again a little later 🙂

[Annie Tandy]

I’m not sure why it was down for you? I checked it on all of my devices not logged in) and the links work. Can you try again?

[Barry]

Hi Annie,

Worked this time, thanks!

Following the steps described here, can you create a new sub-directory within your theme, something like this:

wp-content/themes/[YOUR_THEME]/tribe-events

Within that, add a new file called tribe-events.css so in your case you should end up with:

wp-content/themes/suffusion/tribe-events/tribe-events.css

In this new file, please try adding:

.single-tribe_events .tribe-events-content {
    width: 96%;
}

Does that help?

[Barry]

Apologies, when I wrote “the steps described here” I meant to link to this guide:

theeventscalendar.com/knowledgebase/themers-guide

[Annie Tandy]

Can I just add the code you suggested at the end to the custom css file I already have in my theme? I have other thing specified in there for various things. (Just seeing if I can simplify so I don’t have to remember multiple files to add to.)

[Annie Tandy]

And one more spacing question: there seems to be two spaces between all of the venue names and the comma that comes before the address on each event. Is there a way to fix that? Or is there a reason for that?

Thanks!

[Barry]

Hi Annie,

Can I just add the code you suggested at the end to the custom css file I already have in my theme?

Give it a shot and if it works, great!

And one more spacing question: there seems to be two spaces between all of the venue names and the comma that comes before the address on each event. Is there a way to fix that?

So you’re referring to list view in this case? If so, it appears that there is a custom rule in relation to your theme (defined in suffusion/custom-styles.css):

article.page span.author {
    float: left;
    padding-right: 10px;
}

Removing the padding-right rule would resolve this, or alternatively you can follow a similar approach as before and add a new rule like this:

#tribe-events-content-wrapper .author { 
    padding-right: 0px;
}

[Annie Tandy]

Thanks! That fixed the space before the comma for the venue and it also fixed the left margin cutting off the description in the individual event.

The only thing it didn’t fix is the right side being cut-off on the main calendar page (http://www.mykidlist.com/events/). Is there another line of css I can add for that?

I appreciate your help and quick responses!

[Barry]

Hi Annie,

Do you mean the main list or main calendar (month/grid view)?

Not sure I can identify the problem … which browser (and which version) are you using – can you point me in the right direction here?

Thanks!

[Annie Tandy]

My calendar page (http://www.mykidlist.com/events/) in the default List view. The right side of the description is cut-off when I view it on Safari (v8.0.6), Firefox (v37.0.2) and iOS (v8.4) on my phone.

[Barry]

How about this?

.tribe-events-list-event-description.description {
	margin-left: 0;
}

[Annie Tandy]

That worked! Thank you so much!!

[Barry]

My pleasure 🙂

[Author]

Posts