Smaller icon in widget

  • dismas

    (@dismas)


    5 months ago

    I’m trying to shrink the size of the “page a day” sort of icon that is in the widget on the homepage of my site. Each event has this icon that shows the date of the upcoming event with the date in it. Where it says “01 Jul” or “15 Aug” or whatever. That page a day looking icon takes up a bit more space than I’d like. To try to shrink it down a bit, I’ve changed this code:

    <div class="em-item-image {no_image}has-placeholder{/no_image}" style="max-width:60px">

    The width is 120 by default and I’ve changed that, as you see, to 60. But the text within the icon, of course, remains the same size. What can I do to change the size of that text along with the “page a day” style icon?

    Thank you!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • joneiseman

    (@joneiseman)

    Add the following custom CSS:

    .widget_em_widget .em.em-events-widget .em-item .em-item-image-placeholder div.date span.day {
        font-size: 20px !important;
        line-height: 20px !important;
    }
    joneiseman

    (@joneiseman)

    The following will also reduce the size of the icon:

    .em.em-list-widget .em-item .em-item-image .em-item-image-placeholder {
        width: 90%;
        background-size: 90% !important;
    }
    .widget_em_widget .em.em-events-widget .em-item .em-item-image-placeholder div.date span.day, .widget_em_widget .em.em-events-widget .em-item .em-item-image-placeholder div.date span.month {
        font-size: 12px !important;
        line-height: 1px !important;
    }
    .em.em-list-widget .em-item .em-item-image.has-placeholder .em-item-image-placeholder {
        max-width: 60px !important;
    }
Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.