Solved

Change image size in Multicolumn Section on Product Page

isabellemaria
Trailblazer
197 1 25

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:

 

Bildschirmfoto 2024-05-25 um 15.31.33.png

 

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 

Accepted Solution (1)

BSSCommerce-HDL
Shopify Expert
726 240 251

This is an accepted solution.

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

BSSTechVenture_1-1716644914047.png

 

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

BSSTechVenture_2-1716644918728.png

 

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: 

BSSTechVenture_0-1716644900641.png

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

 

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 3 (3)

ThePrimeWeb
Shopify Partner
2138 614 488

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;
}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

TerenceKEANE
Shopify Partner
511 86 78

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;
}

 

shopify.base.css.jpg

 

Terence.

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

BSSCommerce-HDL
Shopify Expert
726 240 251

This is an accepted solution.

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

BSSTechVenture_1-1716644914047.png

 

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

BSSTechVenture_2-1716644918728.png

 

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: 

BSSTechVenture_0-1716644900641.png

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

 

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency