Event Calendar Listing Details Not Indented

[Mirja]

The top half of the Event Calendar listing details is not indented. Please refer to my webpage (http://refreshfotos.com/event/saving-organizing-your-iphone-photos-3/). The indentation begins half way down the page with “What You Receive”. How can the top portion of the page match this indentation?

Thank you for your assistance.

[Cliff]

Hi. Thanks for your detailed question.

I created this video to describe what’s going on at the link you shared: https://cl.ly/073i2s2z3C1F

Please let me know if I can be of further assistance.

Thank you.

[Mirja]

Hi Cliff,

Thank you for your video response. Yes, I manually added the padding to those paragraphs you pointed to. The reason is I wanted the paragraphs to align with the the bottom section which begins with “Details” beneath Google Calendar. This section was automatically formatted by default.

I would like the top section (the image, headline, date, cost and first 2 paragraphs) to also be indented. I was not able to add the padding as this section seems to be impacted by other coding. This left alignment (without indentation) looks unprofessional on a website. For some reason it occurs automatically by default when using Events Calendar with my theme.

Would you please offer an overall solution to have the content on the entire page indented to look similar to the padded paragraphs. Yes, I can go in and delete the padding, but it’s the indentation I’m seeking for the overall webpage. Many thanks for your assistance.

[Cliff]

Mirja, sure, I can offer some CSS to help. First, please remove all your inline CSS (the padding: 30px). Then add this CSS code to your site:

body.single-tribe_events .tribe-events-notices,
body.single-tribe_events .tribe-events-single-event-title,
body.single-tribe_events .tribe-events-schedule,
body.single-tribe_events .tribe_events {
padding-left: 4%;
padding-right: 4%;
}

You can add custom CSS code via your child theme’s style.css file or via a plugin like Simple Custom CSS or, my favorite, Jetpack. Jetpack supports regular CSS and the LESS and Sass pre-processors.

If you’re not a CSS expert, Jetpack’s Custom Design reference may prove helpful.

Please let me know how it goes for you.

[Mirja]

Cliff,

Fantastic! That worked beautifully. Thank you so much. 🙂

[Cliff]

You bet. Glad to help. Have a great weekend.

[Author]

Posts