Enfold theme makes plugin layout unusable

  • Resolved rolfjack

    (@rolfjack)


    5 years ago

    I have set up theeventscalendar on a site using the Enfold theme.

    The results are not very encouraging. It looks terrible actually. Normally the layout is in the middle of the screen, but the event goes from edge to edge.

    I cannot seem to find a way to set up a template for future events. Nor can I make a specific event look nice.

    It is as if the plugin ignores the general layout of the site.

    I have enabled the Gutenberg block editor which should allow me to do some edits. But even if I succeed it means that I will have to struggle like this with every event I setup. This is not a reasonable way to deal with events.

    There MUST be a way to set up a design for events once and then have future events conform to this design.

    Can anyone help?

    WORDPRESS VERSION: 5.3.2
    PERMALINK STRUCTURE: https://avalonhuset.dk/%year%/%monthnum%/%day%/%postname%/
    PHP VERSION: 7.3.15
    PHP
    max_execution_time = 120
    memory_limit = 768M
    upload_max_filesize = 128M
    post_max_size = 128M
    display_errors = 1
    log_errors = 1

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor Andras Guseo

    (@aguseo)

    Hi @rolfjack

    I took a quick look and there is this piece of CSS which makes the event content float to the right, so the event details will slip in next to it.

    .av-single-event-content {
	width: 60%;
	float: right;
	margin-left: 50px;
}

    You will need to remove the float:right; for a start.

    Here’s some CSS that you could use to get to a nicer layout:

    /* Positioning the event content */
.av-single-event-content {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}
/* Positioning the Before HTML part and the details */
.tribe-events-before-html,
.av-single-event-meta-bar-desktop {
	max-width: 60%;
	margin: auto;
}
/* Add a bit of padding for mobile devices */
#top.tribe-mobile #tribe-events-pg-template {
	padding: 0 20px;
}

    Hope this helps you get started.

    Cheers,
    Andras

    Thread Starter rolfjack

    (@rolfjack)

    Thank Andras

    I tried adding your code to the appearance->custom CSS section, but it do not seem to change anything…

    Thread Starter rolfjack

    (@rolfjack)

    Correction: It does change the details box slightly. However, the details should NEVER be able to float up besides the main text. And when the browser is on a wide screen the event layout should stay within the boundaries that the template has otherwise.

    I thank you for your suggestion, but I think there is something more basic that needs addressing to make this behave meaningfully.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Enfold theme makes plugin layout unusable’ is closed to new replies.