Reduce Product Image In Collection Page - Dawn

Tara123
Explorer
65 3 6

Hi,

 

For product images in collection page, I want to reduce the image size ( to 80%) and padding (custom top, bottom), for desktop and mobile. Can anyone please advise the code to achieve that? Thanks.

www.veepli.com 

 

Best Regards,

Tara

Replies 8 (8)

prakashVt
Shopify Partner
95 9 16

Hello @Tara123 
Do you want something like this?

prakashVt_0-1711609272166.png

 

- Did you find my response useful? Mark it as "Accepted solution"; so others can see it, or just like it.
- VTN Power Wishlist Looking for a Wishlist App for your store? Check this app with the free plan available.
- Feel free to Contact me

Raj-webdesigner
Shopify Partner
236 52 53

1) Edite Code

2) Find base.css

 

Add This css In your bsase.css File

@media screen and (max-width: 990px){
    .grid--1-col-tablet-down .grid__item {
        width: 45% !important;
        max-width: 50% !important;
    }
}



If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com
Tara123
Explorer
65 3 6

Thank you. It does not work though. Anyway, I figured it out myself.

Raj-webdesigner
Shopify Partner
236 52 53

Great Work @Tara123 

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com

BOOST-STAR
Shopify Partner
94 6 10

Hi, Tara123

I hope you are doing Great.

You need to  have to make changes to your website's CSS styles in order to achieve your goal of reducing the image size and adjusting the padding for product photos on desktop and mobile views in a collection page. you can follow these steps that i given below.

=>First you need to Identify the Selector than

=> Adjust Image Size and Padding- Once you've identified the selector, you can use CSS to change the pictures' size and padding. The width and padding-top and padding-bottom settings than you will add custom padding to the top and bottom of the images, as your preference size, and to decrease their size. and After that  you will use Media Queries for Responsive Design.

- Call Us BOOST STAR
- Was our reply helpful? Give us BOOST ... We mean 'Like'
- Was your question answered? Marked us reply as an Accepted Solution
Tara123
Explorer
65 3 6

Yes, I found the rule. The issue is that I don't know the exact selector, since I have no coding experience. 

BOOST-STAR
Shopify Partner
94 6 10

you need to go to Tiny png website p12.png

and If you want to fix this problem using coding like for padding (Top and Bottom) you need to add below code 



p13.png

/* Reduce image size to 80% */
img {
width: 80%; /* Set image width to 80% */
height: auto; /* Maintain aspect ratio */}

/* Adjust padding for desktop and mobile */
@media only screen and (min-width: 768px) {
/* Target desktop screens */
.container {
padding-top: 20px; /* Custom top padding */
padding-bottom: 20px; /* Custom bottom padding */}
@media only screen and (max-width: 767px) {
/* Target mobile screens */
.container {
padding-top: 10px; /* Custom top padding */
padding-bottom: 10px; /* Custom bottom padding */}

- Call Us BOOST STAR
- Was our reply helpful? Give us BOOST ... We mean 'Like'
- Was your question answered? Marked us reply as an Accepted Solution

PageFly-Oliver
Astronaut
840 175 155

Hi @Tara123 

 

You can try this code by following these steps:

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

Step 2: Search file theme.liquid

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

 

<style>
#shopify-section-template--22323469222198__featured_collection_MXPYnb .card__inner.ratio{
margin-bottom: -60px;
}
</style>

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.