• Resolved timwarner69

    (@timwarner69)


    Is there any way I can reduce the size of the header dictated by the Events Calendar default template please? At the minute I have a huge gap between my breadcrumbs line & the filters beneath the header.

    Thanks in advance!

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Hey there @timwarner69!

    Thanks for reaching out.

    This CSS will reduce the margins on top and bottom of the title.

    h1.tribe-events-page-title {
    margin-top: 0px;
    margin-bottom: 0px;
    }

    It looks like fusion is also adding a bottom margin. So something like this might help with that:

    div.fusion-events-before-title {
    margin-bottom: 0px;
    }

    Hope that helps!

    Thread Starter timwarner69

    (@timwarner69)

    Hi Ed,

    Thanks for the quick reply, I really appreciate it. I’ve dropped that into the Avada custom css area on the theme & refreshed the page but no luck I’m afraid. I tried a different browser too, but still no good. Should I try it somewhere else? If so, could you give me a steer please?

    Thanks again.

    Tim.

    Thread Starter timwarner69

    (@timwarner69)

    Hi Ed,

    Did you catch my response to your suggestion? Just wondered if you had any other suggestions please? We’re hoping to go live next week & it would be really helpful to have this issue resolved in time.

    Happy to give you admin access to the site if that would help.

    Thanks in advance.

    All the best,

    Tim.

    Sometimes you’ll need to override the styles. Directions can be found on our Help Desk.

    Perhaps try adding this in a child theme’s styles.css — that selector worked for me in browser, so I’m wondering if your custom CSS in theme is not applying.

    Hope that helps!

    Thread Starter timwarner69

    (@timwarner69)

    Thanks Ed,

    You were right. The custom css wasn’t applying. I read the [very helpful] article you suggested & went with the plugin Simple Custom CSS, which worked a treat & the css has been applied successfully. Thank you.

    Would you have any css suggestion to apply the same margin reduction to the filter at the top of the same page too please? The header & footer of that filter section is way too big too, it’d be great to be able to reduce it a bit.

    Thanks in advance.

    Tim.

    Setting padding-bottom and padding-top to 0px on #tribe-events-bar .tribe-bar-filters

    The same for #tribe-events-bar #tribe-bar-views .tribe-bar-views-inner

    It looks like #main from your theme is also adding a 50px top and 60px bottom — keep in mind that changing this will impact all pages.

    Take care,
    Ed ??

    Thread Starter timwarner69

    (@timwarner69)

    Thanks Ed,

    I applied that, but it didn’t seem to do anything – can you check my css please? Not sure it’s correct…

    #tribe-events-bar .tribe-bar-filters {
    margin-top: 0px;
    margin-bottom: 0px;
    }
    #tribe-events-bar #tribe-bar-views .tribe-bar-views-inner {
    margin-top: 0px;
    margin-bottom: 0px;
    }

    Thanks again for all your help.

    Tim.

    Yeah, looks good. For some of The Events Calendar styling, you have to override the stylesheet. Our Themer’s Guide is a great resource to get you going.

    Hey there,

    Since this thread has been inactive for a while, I’m going to go ahead and mark it as resolved. Don’t hesitate to create a new thread any time you help again!

    Ed ??

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Calendar header size’ is closed to new replies.