Strange Mobile Layout Single Event

  • Resolved Graham

    (@sandgroper)


    6 years, 10 months ago

    I have a strange problem with the page layout when viewing an event on a mobile in portrait view.

    The whole page is floating and moves left and right. The menubar also misbehaves.

    I have disabled my child sytles.css file but it is not caused by that. You can see it from the link to my test site page.

    If you click on the location, that screen works fine. All other pages work fine too. It is only the event page.

    I have tried to find why this might be happening, but have not had any success.

    It is not a simple CSS problem, the whole page including the menubar floats. It seems to kick in when the @media gets to 400px.

    It happens on stock themes too.

    This happens on all my sites and I have just put up with it. But it would be nice to be able to fix it. Any ideas?

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support angelo_nwl

    (@angelo_nwl)

    at the moment you need to use custom css styling and modify format under events > settings > formatting > events > single events page format

    Thread Starter Graham

    (@sandgroper)

    Hi Angelo,

    What exactly needs changing? The whole page is floating, including the menu navbar, which is not unique to the single event page.

    And why is it happening when screen size is less than 400px?

    Is there something in the “single events page format” that would cause this?

    Thread Starter Graham

    (@sandgroper)

    Okay, I’ve found the problem. It’s the booking form width, which is set to 360px.

    I’ve added this to my child style.css:

    /* Booking Form Width */
@media screen and (max-width: 480px) {
.em-booking-form-details {
    width: 100%!important;
}
}

    Now the screen no longer floats.

    This sounds like a theme issue because Events Manager doesn’t create the navbar of the site.

    There’s nothing specific in the default single events format that would cause something like this, but you may need to add CSS code to that box to get the layout you want.

    You’ll see there’s a small amount of inline CSS in that field relating to the map. If you remove that, that will give “free reign” to your theme styles.

    Thread Starter Graham

    (@sandgroper)

    Hi Caimin,

    That’s why it’s taken me so long to figure it out. I suspected it was the map container. I have removed that div line in the past to no avail.

    It wasn’t until I found the hardcoded 360px width for the booking form that ( combined with my 40px page padding) the 400px cut in point made sense.

    Once I override that in the style.css file, the page is no longer broken and the navbar works as it should.

    Sounds like this is resolved now (?) Let us know if not.

    Thread Starter Graham

    (@sandgroper)

    Yes. Marking it as resolved.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Strange Mobile Layout Single Event’ is closed to new replies.