Display list or calendar based on screen width

  • Resolved puk789

    (@puk789)


    5 years, 7 months ago

    It would be awesome if one could display a calendar (wp fullcalendar) on big screens (laptops etc.) and a list on smaller screens (mobile etc.).

    Currently, I am using calendar and displaying availability information in the tooltip so that user doesn’t have to actually go to that event to see if they can still book a place. However, this hover will be problematic with mobile so I thought I would just display how many places there is still left as an additional column in the events list.

    Is this possible using e.g. conditional shortcode or something? E.g. only trigger the event list shortcode if the screen size < 500px, otherwise use calendar shortcode.

Viewing 1 replies (of 1 total)
  • Stonehenge Creations

    (@duisterdenhaag)

    5 years, 7 months ago

    EM User here 🙂
    You can do that with some simple css:
    https://www.w3schools.com/css/css3_mediaqueries_ex.asp

    – Create a div for the list view with class=”list-view”.
    – Create a div for the full view with class=”full-calendar”.
    Then both will be shown on the page.

    To hide one and show the other, based on screen size, you need to use css media queries in your stylesheet CSS:
    @media screen and (max-width: 750px) {
    .list-view {
    display: block;
    // other styling
    }

    .full-calendar {
    display: none;
    }
    }

    @media screen and (min-width: 751px) {
    .list-view {
    display: none;
    }
    .full-calendar {
    display: block;
    // other styling
    }
    }

Viewing 1 replies (of 1 total)
  • The topic ‘Display list or calendar based on screen width’ is closed to new replies.