Help Desk

Previous Link on Month View Issue

  • Posts: 1 Topics: 3
    | Permalink

    I’m having some issues with the month view – I changed the CSS so that the desktop version of the previous/next links look more like the mobile versions of the buttons, but unfortunately, something is going wrong. I see that the li for tribe-events-nav-previous basically disappears (and is no longer clickable) at the 768px breakpoint, but unfortunately, this does not happen when the page is larger than that and we end up seeing the blue box as you see in the screenshot. We’ve tried multiple jQuery and JavaScript solutions, but they haven’t worked. So I’m hoping a developer on your end can explain how the previous month disappears on mobile devices so that we can implement that on the other views. Thanks for the help!

    Posts: 1 Topics: 3
    | Permalink

    Nevermind – I basically fixed it by targeting the a tag instead of the li and used inline-block for desktop and block for mobile. So now it seems to be working properly.

    /*Month View*/
    .tribe-events-month .tribe-events-sub-nav span {display: none}
    .tribe-events-month #tribe-events-header .tribe-events-sub-nav li {margin-right:0}
    .tribe-events-month #tribe-events-header .tribe-events-sub-nav .tribe-events-nav-next a, .tribe-events-month #tribe-events-header .tribe-events-sub-nav .tribe-events-nav-previous a {color: #FFF; background-color: #4cb8e4; transition: all ease-in-out .5s !important; padding: 8px 15px; text-transform: uppercase; display: inline-block;}
    .tribe-events-month #tribe-events-header .tribe-events-sub-nav .tribe-events-nav-next a:hover, .tribe-events-month #tribe-events-header .tribe-events-sub-nav .tribe-events-nav-next a:focus, .tribe-events-month #tribe-events-header .tribe-events-sub-nav .tribe-events-nav-previous a:hover, .tribe-events-month #tribe-events-header .tribe-events-sub-nav .tribe-events-nav-previous a:focus {background-color:#009ad8 !important}
    
    @media (max-width:768px) {
    .tribe-events-month .tribe-events-sub-nav li a {background-color:#4cb8e4!important;display:block !important}
    .tribe-events-month #tribe-events-header .tribe-events-sub-nav .tribe-events-nav-previous, .tribe-events-month #tribe-events-header .tribe-events-sub-nav .tribe-events-nav-next {padding:0 !important}
    .tribe-events-month .tribe-events-sub-nav li a:hover, .tribe-events-list .tribe-events-sub-nav li a:focus {background-color:#009ad8 !important}
    }
    Posts: 6513
    | Permalink

    Thanks for that update Sam. Please let us know if you run into any other issues.

    Thanks
    Courtney 🙂

    | Permalink