Return to previous page

How change the size and the desgin of the sub catagories?

This topic has 10 replies, 2 voices, and was last updated 1 years, 4 months ago ago by Rose Tyler

Tal

Participant

August 14, 2023 at 15:49

hey
how can i make smaller the sub catagories and desgin them?

https://prnt.sc/0G1h9XGAmtXi

#364532 Copied Theme version: 9.1.4 WooCommerce version: 7.7.0

9 Answers

Rose Tyler

Support staff

August 14, 2023 at 17:26

Hello, Tal,

Please provide URL of page from your screenshot.

Kind Regards,
8theme team

#364537 Copied

Tal

Participant

August 14, 2023 at 17:49

https://ekzotika.co.il/product-category/%d7%9b%d7%9c%d7%91%d7%99%d7%9d/

#364540 Copied

Rose Tyler

Support staff

August 15, 2023 at 09:21

Hello, Tal,

Thank you for your response.

Please describe in more detail the desired result you want to get. Right now your request is a bit unclear to us.

Kind Regards,
8theme team

#364576 Copied

Tal

Participant

August 15, 2023 at 17:13

hey
how can i change the size of the sub catagories? its so big on mobile i want to make it much smaller.

like here:

https://prnt.sc/VyndE8p2h-fV

#364644 Copied
Rose Tyler

Support staff

August 15, 2023 at 17:15
Hello, Tal,

Please try to use the next custom CSS code:
```
.category-grid>a img {
    padding: 50px;
}
```
Kind Regards,
8theme team
#364646 Copied
Tal

Participant

August 15, 2023 at 17:20

its made the img smaller but the border still big
how to make it same small size?

here:
https://prnt.sc/Hox-KJw91rIp

#364647 Copied
Rose Tyler

Support staff

August 16, 2023 at 07:33
Hello, Tal,

In this case, please change the code to:
```
@media only screen and (max-width: 768px) {
    .products-bordered-layout.with-ajax .ajax-content>.category-grid, .products-bordered-layout:not(.with-ajax)>.category-grid {
        border: none;
        padding: 2vw;
        margin: 0 !important;
    }
    .products-bordered-layout.with-ajax .ajax-content>.category-grid > a, .products-bordered-layout:not(.with-ajax)>.category-grid > a {
        border: 1px solid var(--et_border-color);
    }
}
```
Kind Regards,
8theme team
#364684 Copied
Tal

Participant

August 16, 2023 at 16:39

hey
how to remove space between them?
all my point was to make it smaller to save place.

https://prnt.sc/1iEx83VHRYsz

#364725 Copied
Rose Tyler

Support staff

August 16, 2023 at 19:02
Hello, Tal,

Thank you for your response.

If you want to get 4 items per row, please change the previous code to:
```
@media only screen and (max-width: 768px) {
    .products-bordered-layout.with-ajax .ajax-content>.category-grid, .products-bordered-layout:not(.with-ajax)>.category-grid {
        border: none;
        margin: 0 !important;
    }
    .products-bordered-layout.with-ajax .ajax-content>.category-grid > a, .products-bordered-layout:not(.with-ajax)>.category-grid > a {
        border: 1px solid var(--et_border-color);
    }
    .products-grid .product-category {
        width: 25% !important;
    }
}
```
If you have any additional questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

Kind Regards,
8theme team
#364728 Copied
Tagged: change subcategory size, customize woocommerce design, modify woocommerce subcategories, woocommerce design tutorial, wordpress subcategory adjustment, wordpress woocommerce templates
Viewing 10 results - 1 through 10 (of 10 total)