Complimentary products image size

Store Design
, , , ,
1

Hi,
I would like to increase the size of my complimentary products section on mobile, for some reason it is very small and people can’t really see the products so good. Hope someone can help with this :slightly_smiling_face:
Basically to maintain to have a larger image and the product details bellow, not next to it

Password: 123456
26eacc-2.myshopify.com
Focal theme

Daniel19901_1-1718628435226.png
Daniel19901_1-1718628435226.png273×200 12.1 KB

2

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

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

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

@media screen and (max-width: 740px) {
    .product-content__featured-products .product-item__image-wrapper {
        width: 200px !important;
    }
    product-item.product-item:has(.product-item__image-wrapper) {
        flex-direction: column;
    }
}

Here is result:

BSSCommerceB2B_2-1718632099540.png
BSSCommerceB2B_2-1718632099540.png837×652 61.4 KB

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

3

Hi @Daniel19901

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 767px){

.product-item__image-wrapper {

width: 150px !important;

margin-right: 10px !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly