Change image size in Multicolumn Section on Product Page

[isabellemaria]

Hi there!

I want to change the image size / padding / whatever is required so the 5-stars-image at the bottom of my product page is displayed like right one in the screenshot:

How can I do this?

My page is https://taneraskin.com/collections/produkte using Dawn theme.

The code where I changed something in section-multicolumn.css is:

/* CHANGE; default: width: auto; */
.multicolumn-list__item.center .media--adapt,
.multicolumn-list__item .media--adapt .multicolumn-card__image {
width: 50%;
height: 100%;
padding-bottom: 0px;
padding-top: 20px;
}

Best regards,

Isabelle 

[ThePrimeWeb]

Change that code to this @isabellemaria,

.multicolumn-list__item.center .media--adapt,
.multicolumn-list__item .media--adapt .multicolumn-card__image {
width: 50%;
height: 100%;
padding-bottom: 0px;
padding-top: 20px;
object-fit: cover;
}

[TerenceKEANE]

Hi,

The following code will do what you want. You can change the values as you like. If you encounter any issues again, feel free to write, I'll help.

Navigate to the 'Edit Code' option in your theme settings, then search for “base.css” in the search bar and add below codes.

.multicolumn-list__item .media--adapt .multicolumn-card__image {
    width: 100%;
    padding-right: 60px;
}

Terence.

[BSSCommerce-HDL · Accepted solution]

Hi @isabellemaria, 
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save

.media.media--transparent.media--adapt {
    padding-bottom: 20% !important;
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you