Width

[radiodano]

Greetings Tribe!

My calendar has been working well, there is one thing tho: http://www.froggy929.com/event/sonoma-county-home-garden-show/

My content are width is 728, and thus all my graphics are that size. Seems like the events calendar graphics are 708. Also, as you can see below, the map etc are distorted as well.

Help?

[George]

Hi there,

Thank you for reaching out!

Your issues here are related to CSS on your site, and so to fix them you would have to write custom CSS. We unfortunately cannot help with general design questions OR with custom CSS here—check out the “Product Support” section of this page for more information → http://theeventscalendar.com/terms.

However, that doesn’t meant we can’t at least try to help a bit at first to get the ball rolling. 🙂 I will show you how to resolve these two issues and from there you can apply these principles to any further design troubleshooting that arises with your site.

---

Part One: The Post Images

The post images on your site having a padding-left value applied to them. This forces them a bit out of alignment and is what I think is causing the sizing issues you mention. To address this, try adding the following bit of CSS to the bottom of your theme’s style.css file:


.type-tribe_events .wp-post-image {
padding-left: 0 !important;
}

---

Part Two: The Maps

The map is not quite “distorted”, but it’s definitely fitting into a narrow space. This is because the three columns of information in the Event Details section there, where the map and the other info like venue and organizer or location, each is set to take up 33.3% of the width. Or about one third.

There is also some whacky negative-margin stuff going on with the titles in that section from your theme!

So, to modify this, you would have to first remove the whacky negative-margin stuff with titles there from your theme. You can do that by adding this line of code to the bottom of your theme’s style.css file:


.single-tribe_events #tribe-events-content .tribe-events-event-meta dt {
margin-left: 0 !important;
}

From there, you would simply need to adjust the widths of the columns to make more room for the map. Now, be sure to remember that the total value of the widths has to add up to 100%. So, for example, this code below will increase the width of the map area significantly to give it a more “square” presentation. I’m bumping the width to 50%. Notice how I also, though, have to reduce the Venue and Details columns to 25% width so that instead of 3 x 33.3, we have 25 + 25 + 50. Still adds up to 100, so it should work well.

Here’s the CSS to modify the column widths in this way:


.tribe-events-meta-group.tribe-events-meta-group-details,
.tribe-events-meta-group.tribe-events-meta-group-venue {
width: 25%;
}

.tribe-events-meta-group.tribe-events-meta-group-gmap {
width: 50%;
}

Try out this code on your site—I hope it helps!

If you’re not sure how to add CSS or anything like that, for these sorts of questions head to good old Google and research how to do these things; they are general web development questions, not things related to our products directly.

To make any other modifications to your site, you will have to take the reins on doing so. To help write custom CSS on your site, definitely check out a [free!] tool like Firebug if you use FireFox, or the Developer Tools for either Safari or Chrome. They have “Inspector” tools that let you zoom right over the element whose styles you would like to change—these are the tools I used to come up with the CSS written above. 🙂

Best of luck with your customizing,
George

[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