Resize List Images

Site URL: http://www.lrics.ca

Hi!

Looking for help resizing the icons for mobile in a simple list section. It's located on the Areas of Expertise page, green background. As well as centering those icons once resized, or potentially having a 2 icon grid for mobile. 

Password: LRICS

Thanks!

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="628d0bd01da71544b398d5ce"] .list-item-media {
    width: 30% !important;
    margin: 0 auto;
}
}

The above code works great, thank you!

But how can I left-align the images? And how do I change the height of the images? Using "height: X% !important" in CSS doesn't seem to do anything. Currently my images are rectangular and cut off, I'd prefer them to be square.

URL: https://www.impetusdesign.studio/firm-to-client

Pass: leopard

On 6/12/2024 at 2:05 AM, Anna_U said:

The above code works great, thank you!

But how can I left-align the images? And how do I change the height of the images? Using "height: X% !important" in CSS doesn't seem to do anything. Currently my images are rectangular and cut off, I'd prefer them to be square.

URL: https://www.impetusdesign.studio/firm-to-client

Pass: leopard

change

margin: 0 auto;

to

margin-left: 0;

to increase height, use this

.user-items-list-item-container[data-section-id="6657a40e18939c714b588e11"] .list-item-media-inner {
    padding-bottom: 120% !important;
    overflow: visible !important;
}
.user-items-list-item-container[data-section-id="6657a40e18939c714b588e11"] img {
    object-fit: contain !important;
}