Center Product Name and Photo and Enlarging Photos

hunterhemm
Tourist
3 0 2

Hello, 

Hoping someone can offer some suggestions for me! Below is my current layout for my collection pages: Screen Shot 2021-06-25 at 9.52.27 AM.png

The product title and product image are not aligned. I would like the product name and price to start at the left edge of the product photo. I am also looking to make the white space between each product image smaller. Below is an example of what I am wanting it to look like!

Screen Shot 2021-06-25 at 9.52.37 AM.png

 

Anyone have a solution for this? Thanks!!

 

Website here!

hunterhemm
Tourist
3 0 2

I was able to find a solution for this! Just in case anyone else is needing the same thing.. sharing the code that worked for me! Debut theme!

/*== Resizes Collection Images and padding ==*/
.grid-view-item__image-wrapper {
max-width: 540px !important;
max-height: 540px !important;
}

#Collection .grid-view-item__image {
max-width: 540px !important;
max-height: 540px !important;
}


/*== Resizes Featured Collection Images and padding ==*/
div#shopify-section-1584030855651 .page-width {
max-width: 100%;
}
div#shopify-section-1584030855651 .grid-view-item__image-wrapper {
max-width: 100%;
}
div#shopify-section-1584030855651 .grid-view-item__image-wrapper .grid-view-item__image {
max-width: 100%;
max-height: 100%;
}

 

*You'll need to change the section number to your specific site (you can find this my using the inspect feature on Chrome for those that are new )

0 Likes
dmwwebartisan
Shopify Partner
8489 1996 2681

@hunterhemm 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.template-index .price{display: block !important; text-align: center !important;}
.template-index .product-card {text-align: center;}
.template-collection .product-card__title {display: block!important;text-align:center !important;}
.template-collection .price{display: block !important; text-align: center !important;}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes