Solved

How can I resize my product cards on Desire-online.net?

jakegrieveson
Explorer
123 0 16

The first image is the sizing i want but i cant seem to work out how to make mine smaller to match, is there any code that could help? Website: Desire-online.net

Screenshot (50).pngScreenshot (51).pngScreenshot (52).png

Accepted Solution (1)

ZenoPageBuilder
Shopify Partner
1052 203 218

This is an accepted solution.

Hello @jakegrieveson 

To make the product card smaller, inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.product-card-wrapper .card__inner {
    width: 60%;
    margin: auto;
}

Hope it helps!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com

View solution in original post

Replies 9 (9)

Dan-From-Ryviu
Shopify Partner
7721 1502 1510

Hi @jakegrieveson 

You can try to add this CSS code at the bottom of base.css file of your theme to check

.collection.page-width {
max-width: 1200px !important;
}

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

jakegrieveson
Explorer
123 0 16

It is still the same

Transcy
Shopify Partner
285 19 83

Hello @jakegrieveson ,

 

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code

Go to Assets folder -> base.css file or theme.scss.liquid file 

Add this following code at the bottom of page

.product-card {
  width: 200px;
  height: 250px;
}

Save and preview

 

Let us know if you can make it.

Transcy

Transcy - The #1 Translation and Currency Converter
- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Blog
jakegrieveson
Explorer
123 0 16

this didnt work either it just stayed the same

ZenoPageBuilder
Shopify Partner
1052 203 218

This is an accepted solution.

Hello @jakegrieveson 

To make the product card smaller, inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.product-card-wrapper .card__inner {
    width: 60%;
    margin: auto;
}

Hope it helps!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
jakegrieveson
Explorer
123 0 16

this also didnt work, they just stayed the same size

jakegrieveson
Explorer
123 0 16

yes

SpankysLoot
Visitor
1 0 0

Hello, how would I also get this code to work on Mobile too?

jakegrieveson
Explorer
123 0 16

None of these have worked