Home › Forums › Calendar Products › Events Calendar PRO › Previous Link on Month View Issue
- This topic has 3 replies, 3 voices, and was last updated 6 years, 6 months ago by Sam Hitner.
-
AuthorPosts
-
September 25, 2017 at 8:47 am #1354298Sam HitnerParticipant
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!
September 25, 2017 at 9:26 am #1354322Sam HitnerParticipantNevermind – 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} }
September 25, 2017 at 2:07 pm #1354542CourtneyMemberThanks for that update Sam. Please let us know if you run into any other issues.
Thanks
Courtney 🙂 -
AuthorPosts
- The topic ‘Previous Link on Month View Issue’ is closed to new replies.