Product Images on home page

[odsadmin]

Hey I would like to change the image size of the products on the home page. If you go to my home page and you scroll down to Popular Dog Products you will see products listed. I would like the images to be smaller and maybe even fit more on each row.

You guys gave me this code before and it worked but it works for the whole site. I just need it on the home page.

/Makes products 5 columns iPad and desktop/

@media(min-width: 768px){
.x-content-band .woocommerce.columns-5 li.product {
width: 18.4%;
margin-right: 2%;
}

.x-content-band .woocommerce.columns-5 li.product.last {
margin-right: 0;
}
}

/* 2 columns on phones */

@media(min-width: 768px){
.x-content-band .woocommerce.columns-5 li.product {
width: 18.4%;
margin-right: 2%;
}

.x-content-band .woocommerce.columns-5 li.product.last {
margin-right: 0;
}
}

@media(max-width: 767px){
.x-content-band .woocommerce.columns-5 li.product {
width: 49%;
margin-right: 2%;
}

.x-content-band .woocommerce.columns-5 li.product:nth-child(2n) {
margin-right: 0;
}

.x-content-band .woocommerce li.product.first {
clear: none;
}
}

[friech]

Hi There,

Thank you for writing in, you can append the class .home on the selectors of the custom CSS you show above, so it will only affect the home page.

/*Makes products 5 columns iPad and desktop*/
@media(min-width: 768px){
.home .x-content-band .woocommerce.columns-5 li.product {
width: 18.4%;
margin-right: 2%;
}

.home .x-content-band .woocommerce.columns-5 li.product.last {
margin-right: 0;
}
}

/* 2 columns on phones */
@media(min-width: 768px){
.home .x-content-band .woocommerce.columns-5 li.product {
width: 18.4%;
margin-right: 2%;
}

.home .x-content-band .woocommerce.columns-5 li.product.last {
margin-right: 0;
}
}

@media(max-width: 767px){
.home .x-content-band .woocommerce.columns-5 li.product {
width: 49%;
margin-right: 2%;
}

.home .x-content-band .woocommerce.columns-5 li.product:nth-child(2n) {
margin-right: 0;
}

.home .x-content-band .woocommerce li.product.first {
clear: none;
}
}

Hope that helps,
Cheers!

[odsadmin]

What would I change to make the pic a little smaller so we can fit 6 in a row in stead of 5. I don’t really need the mobile to change just the desktop. So I’m guessing I will just change this part.

/Makes products 5 columns iPad and desktop/
@media(min-width: 768px){
.home .x-content-band .woocommerce.columns-5 li.product {
width: 18.4%;
margin-right: 2%;
}

.home .x-content-band .woocommerce.columns-5 li.product.last {
margin-right: 0;
}
}

When I change the Columns to 6 with the WPBarkery Page Builder it makes the pics really funky in size. I have attached an image so you can see. Where I am changing that number and what I am getting after changing that. I have not added code yet. Right now it is still the same as what I sent you the first time.

[odsadmin]

[Alaa]

Hi @odsadmin

If you chose 6 columns, then you will need to update that CSS snippet you shared to be like:

@media screen and (min-width: 768px){
    .x-content-band .woocommerce.columns-6 li.product {
        width: 15%;
        margin-right: 2%;
    }

    .x-content-band .woocommerce.columns-6 li.product.last {
        margin-right: 0;
    }
}

Thanks.

[odsadmin]

That worked great!! Thank you so much

Can I change the amount of spacing in the Columns. The Marginless Columns when checked puts way to much space between the boxes. I just want a little more then when that box is not checked.

Its applys to the boxes above the products. At the very top of that home page.

[christopher]

Hi odsadmin,

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long thread makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

In general, you need to use the margin for such cases. I strongly suggest that you start learning more about the CSS coding as no matter what page builder you use there will be always a case that you will need a custom CSS code to fine tune stuff.

Now the question is about the top images as you said. The best way to make a little bit or margin is to actually force the image to be smaller as the margins are hard coded. So you will basically add a CSS like this:

.style_2 .aio-icon-box .img-icon {
    width: 90%;
    margin: auto;
    display: block;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

Thank you.

[odsadmin]

Thank you so much!!

[mldarshana]

Glad we were able to help