Column being obscured by nav

[Erin Muck]

Dear Support,

The calendar looks great except when being resized – there is a point where the MONDAY column goes underneath the nav bar. Screenshot attached. http://westberkeleyfencing.com/events/

It appears to affect smaller screens, such as laptops, but works fine on tablets.

I already have some custom code from you which is as follows:

#tribe-events-pg-template {
margin-left: 102px;
}}

#tribe-events-content { padding-top: 50px !important;}

h3.tribe-events-month-event-title a { color: #222222 !important; }

Thank you for your help!

[Mathew]

Erin,

The issue is with the DIVI theme margin calculations.

The nav bar is set at 325px wide.


.et_vertical_nav #page-container #main-header {
width: 325px;
}


However the theme is only setting the left margin to 225px.


.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
position: relative;
margin-left: 225px !important;
}


The code you were given/using should work fine, however you may want to wrap it in a CSS media query for specific breakpoint. That way it will only apply to larger screens. You may want to add !important to it too.

Funny thing is the theme author takes this into account for other elements, but the Divi builder uses #et-main-area and that has an !important already set. So you would have to use greater CSS specificity to override it.


.et_vertical_nav #main-content, #main-footer, #top-header {
margin-left: 100px !important;
}


Hope this helps.

[Courtney]

Hi Erin

Let me know if @mathewlewis input helps (thanks for that!). If you still need help with this, I’d be happy to take a look.

Thanks
Courtney 🙂

[Erin Muck]

Hello, thanks so much for the input! I added the following and it seems to be working. Does this look like the right solution for this page? http://westberkeleyfencing.com/events/

@media (min-width: 1201px) and (max-width: 1630px){
.et_pb_equal_columns.et_pb_gutters1.et_pb_row_fullwidth {
display: block;
}
#tribe-events-pg-template {
margin-left: 102px !important;
}}

Thanks so much! Erin

[Courtney]

Hi Erin

When I tested on mobile, it looks as I would expect compared to the desktop version. 🙂

Thanks
Courtney 🙂

[Erin Muck]

Oh good. The issue was actually not on mobile – it was on a laptop – so the screen size was much larger (1200 – 1630). I will have my client test and see if it’s working for him. Hopefully so. Thank you! Erin

[Mathew]

Erin,

Looks great. Glad the media query worked.

[Courtney]

Happy to help. I was mainly looking to be sure that all versions looked as expected, switching inside Chrome Dev Tools between phone/table/desktop resolutions.

Thanks again @mathewlewis!

Thanks
Courtney 🙂

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts