Return to previous page

Make Frontpage Category Boxes Smaller - by masseyn

This topic has 12 replies, 3 voices, and was last updated 8 years, 10 months ago ago by Robert Hall

masseyn

Participant

February 6, 2016 at 21:08

I have 10 active categories and would like them to show smaller than they currently and on just two rows.

Does anyone know what i need to change to do this ?

Thanks

Please, contact administrator
for this information.

#111953 Copied Theme version: 4.4.2 WooCommerce version: 2.8

11 Answers
Eva Kemp

Support staff

February 8, 2016 at 09:37
Hello,

Please add this code in Theme Options > Custom CSS > Custom CSS for desktop:
```
.sidebar-position-without .product-category {
    width: 23.3% !important;
}
```
Regards,
Eva Kemp.
#112038 Copied
masseyn

Participant

February 8, 2016 at 12:29

Hi Eva,

I followed this step and no change ?

I have 7 active categories and 2 that are awaiting products to be added. I also have another that will be added soon. I would like the main block of categores on the front page to have smaller boxes fitting more than 3 on each row, 5 would be ideal but 4 would work.

Thanks for all your help.

Please, contact administrator
for this information.

#112086 Copied Theme version: 4.4.2 WooCommerce version: 2.8
Robert Hall

Support staff

February 8, 2016 at 14:20
Hello,

I’ve added the following code in Global Custom CSS. Please check.
```
.sidebar-position-without .product-category {
    width: 20% !important;
}
```
Regards,
Robert Hall.
#112129 Copied
masseyn

Participant

February 22, 2016 at 17:30

By doing this the mobile view is now all over the place…

Is there anyway of having this set different for Mobile and PC ?

#114262 Copied

Eva Kemp

Support staff

February 22, 2016 at 18:56

Hello,

Try to add the code to Custom CSS for desktop section instead of Global Custom CSS.

Thank you.
Regards,
Eva Kemp.

#114284 Copied

masseyn

Participant

February 23, 2016 at 12:29

I have found another small issue. When i turn my shop view into categories and sub-categories then boxes do not fit the page correctly.

http://www.blccs.co.uk/products/

Please, contact administrator
for this information.

#114390 Copied Theme version: 4.4.2 WooCommerce version: 2.8
Eva Kemp

Support staff

February 23, 2016 at 12:50
Hello,

I’ve added this code in Custom CSS for desktop:
```
.row-count-5 .product-category {
    width: 33% !important;
}
```
Please check categories now.

Regards,
Eva Kemp.
#114395 Copied
masseyn

Participant

February 23, 2016 at 13:23

Perfect. Thank you always Eva.

One last question….. 😉 Where do i set how these categories are ordered as want them in alphabetical order.

Thankyou 🙂

Please, contact administrator
for this information.

#114397 Copied

masseyn

Participant

February 23, 2016 at 13:39

Also is there a way to align the background category image in the centre ?

#114398 Copied

masseyn

Participant

February 23, 2016 at 13:58

Or is there a specific size i should be creating this in ?

#114400 Copied
Robert Hall

Support staff

February 23, 2016 at 14:20
Hello,

You can drag and drop these categories manually in Dashboard->Products->Categories http://prntscr.com/a6wx1c

Also I’ve edited this code in Global Custom CSS. Please check.
```
.categories-mask {
    position: absolute;
    width: 100%;
    bottom: 50%;
    margin-bottom: -58px;
    padding: 15px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.75);
    transition: all 0.2s ease-in-out 0s;
    right: 0px;
}
```
Regards,
Robert Hall.
#114403 Copied
Tagged: boxes, category, frontpage, smaller, themes, woocommerce, wordpress
Viewing 12 results - 1 through 12 (of 12 total)