Homepage Feature

Customization Theme component
,
134

I’m trying to make this work as single featured topic on both desktop and mobile.

The CSS isn’t really set up for this, but I’ve managed to hack it with this so that the image shows nicely across the full width:

.featured-topic-wrapper .featured-topics .featured-topic {
    max-width: none !important; 
    .featured-topic-image {
    max-width: 800px !important; 
    width: 100%;
    }
}

However, it isn’t very responsive to screen width changes or mobile, losing the aspect ratio (which I’d really like to keep). I’ve worked around that by choosing an appropriate size image and hard coding a different height.

Is there a simple change I can do in order to make it responsive? Also, is it worth tweaking the CSS of this component to better cater for the use-case of a single featured topic?

3 Likes