0

I am trying to change the style of a widget (https://ibb.co/n3hnXP5) displayed in my home page from Timetable and Event Schedule by MotoPress plugin. The original html output of the widget is

<div class="upcoming-events-widget">
    <ul class="mptt-widget events-list">
                <ul><article class="back" style="background-image: url('<?php echo get_the_post_thumbnail_url($event->event_id, array( 200, 150 )); ?>')">
                <li class="event"><h4 class="event-title">Spiderman</h4></li>
                </article></ul>
                <ul><article class="back" style="background-image: url('<?php echo get_the_post_thumbnail_url($event->event_id, array( 200, 150 )); ?>')">
                <li class="event"><h4 class="event-title">Superman</h4></li>
                </article></ul>
                <ul><article class="back" style="background-image: url('<?php echo get_the_post_thumbnail_url($event->event_id, array( 200, 150 )); ?>')">
                <li class="event"><h4 class="event-title">Batman</h4></li>
                </article></ul>
</ul>

in which i added a background image <article class="back" style="background-image: url('<?php echo get_the_post_thumbnail_url($event->event_id, array( 200, 150 )); ?>')"> in every ul.

The css is

.upcoming-events-widget {
 margin-top:2rem
}

.upcoming-events-widget .mptt-widget.events-list {
 list-style:none;
 margin:0;
padding:0
}

.upcoming-events-widget .mptt-widget.events-list .event {
 list-style:none;
 margin-bottom:2rem;
 padding: 2.1rem 2rem;
 border:none;
 border-left:3px solid #3b5998
}

.back { }

In the case i add the image as background in a div area of the page (not in the sidebar) i get this result enter image description here How can i change the css accordingly to get a result like this? enter image description here

Basically, ul's in a horizontal line with the background images for each ul 200x150. Any help would be appreciated!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.