Support » Plugin: Modern Events Calendar Lite » How to use these two Container Width

Viewing 1 replies (of 1 total)
  • Plugin Author Webnus

    (@webnus)

    Hi @alexlii

    Thank you for your reports,
    We will update the documentation videos (the container size can also be changed in MEC).

    About responsive issue on mobile and tablet, please use CSS below:

    
    @media only screen and (max-width: 767px) and (min-width: 480px) {
        .single-mec-events .mec-container {
            width: 80%;
        }
    }
    
    @media only screen and (max-width: 479px) {
        .single-mec-events .mec-container {
            width: 95%;
        }
    
        .mec-single-event .mec-events-meta-group-countdown {
            margin-left: 0;
            padding: 15px 10px;
        }
    
        .mec-wrap .flip-clock-wrapper {
            padding-bottom: 0;
        }
    
        .single-mec-events .mec-wrap .flip-clock-wrapper .flip {
            width: 22px !important;
            padding: 0 0 0 3px;
            margin: 0 2px;
        }
    
        .single-mec-events .flip-clock-wrapper ul li.flip-clock-active, .single-mec-events .mec-wrap .flip-clock-wrapper ul li:first-child {
            width: 22px;
        }
    
        .mec-wrap span.flip-clock-divider {
            width: 7px;
        }
    
        .mec-wrap .flip-clock-wrapper ul li a div div.inn {
            font-size: 18px !important;
        }
    }
    
    

    Please put above CSS to MEC Settings > Custom CSS

    Best Regards

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.