Change Upcoming Events Thumbnail From Circle to Square

[Brahim]

On the landing page of http://www.mixitup-kitchen.com/ I have an Upcoming Events widget displayed. It shows a thumnail based on the featured image of the event and it is round.

I would like to make it square.

Ive tried changing the CSS to set the border radius to 0:

.av-upcoming-event-image {
    border-radius: 0px;
    width: 60px;
    float: left;
    margin: 0 20px 0 0;
}

When I do this in Chrome>Inspect Element, I get the results I want but not when adding custom CSS.

What am I doing wrong here?
Many Thanks.

• This topic was modified 10 years, 3 months ago by Brahim.

[George]

Hey @Brahim,

This is not a widget that our plugins are generating. This is a widget from some other plugin or from your theme that is using the ‘av-‘ prefix in its CSS.

We unfortunately cannot help with software that is not our own, especially when it comes to custom coding and design-related things.

That being said, I did take a quick look at your site – I’m not quite sure why your CSS didn’t take effect, but what I would recommend is to go to the very bottom of your theme’s style.css file and add the following bit of code there:


.av-upcoming-event-entry .av-upcoming-event-image {
border-radius: 0 !important;
}


If this does not help, then unfortunately the best step I could recommend from there would be to contact the developer of that widget for further assistance.

Thanks,
George

[Brahim]

.av-upcoming-event-entry .av-upcoming-event-image {
    border-radius: 0 !important;
}

Worked well. the “!important” made the difference

[George]

Nice – best of luck with your site 🙂

— George

[Author]

Posts