Return to previous page

How to Change Color mobile menu - by yohantosadu

This topic has 6 replies, 2 voices, and was last updated 6 years, 9 months ago ago by Rose Tyler

yohantosadu

Participant

February 8, 2018 at 10:53

How to Change Color mobile menu from black to white
http://prntscr.com/ibsc86

and how to make product in front page mobile from 1 coloum to 3 coloum with zero margin
http://prntscr.com/ibsd63

#184372 Copied Theme version: WOOPRESSv 3.3 WooCommerce version: Version 4.9.2

5 Answers
Rose Tyler

Support staff

February 8, 2018 at 12:00
Hello,

1. Please add this code in Theme Options > Custom css or in style.css file of child theme:
.mobile-nav-heading, .et-mobile-menu li a, .mobile-nav .links li a{color: #fff;}
2. Please add this code in Theme Options > Custom css > Custom css for mobile:
```
.home .products-grid .product {
    width: 33.33% !important;
}
.home .row-count-3 .product:nth-child(2n+1), .home .row-count-4 .product:nth-child(2n+1){
    clear: none !important;
}
```
Regards
#184398 Copied
yohantosadu

Participant

February 8, 2018 at 15:51

okay, it works.
how to resize font,to make it smaller
http://prntscr.com/ibwu3c

#184457 Copied Theme version: WOOPRESSv 3.3 WooCommerce version: Version 4.9.2
Rose Tyler

Support staff

February 8, 2018 at 15:58
Looks like it would be better to set products in 2 columns, please change this code:
```
.home .products-grid .product {
    width: 33.33% !important;
}
.home .row-count-3 .product:nth-child(2n+1), .home .row-count-4 .product:nth-child(2n+1){
    clear: none !important;
}
```
to this one:
```
.home .products-grid .product {
    width: 50% !important;
}
```
Regards
#184465 Copied
yohantosadu

Participant

February 8, 2018 at 16:31

thank you for ur suggestion,
I will try first with 3 columns,
how to apply to the shop page too …?

align add to cart and selection option
I already use css below

.products-grid .product-title, .productCarousel .product-title{
min-height: 60px;
margin-top: 10px;
}

but,
there are some products that can not be straight
http://prntscr.com/ibxg0m and http://prntscr.com/ibxggd

#184486 Copied Theme version: WOOPRESSv 3.3 WooCommerce version: Version 4.9.2
Rose Tyler

Support staff

February 9, 2018 at 11:47
Hello,

Please delete this code:
```
.products-grid .product-title, .productCarousel .product-title{
   min-height: 60px;
  margin-top: 10px;
}
```
and change this http://prntscr.com/icamut
to:
```
.products-grid .product {
    width: 33.33% !important;
}
.row-count-3 .product:nth-child(2n+1), .home .row-count-4 .product:nth-child(2n+1){
    clear: none !important;
}
```
+ add this code:
```
.products-loop.products-grid {
    display:  -webkit-box;
    display:  -webkit-flex;
    display:  -ms-flexbox;
    display:  flex;
    -webkit-flex-wrap:  wrap;
        -ms-flex-wrap:  wrap;
            flex-wrap:  wrap;
    float:left;
}
.products-loop.products-grid .product {
    position:  relative;
    padding-bottom: 35px;
}
.products-loop.products-grid .add_to_cart_button {
    position:  absolute;
    left:  3px;
    bottom:  0;
}
.products-loop.products-grid .product .price,
.products-loop.products-grid .product  del {
    font-size: 14px !important;
}
.products-loop.products-grid .product .add_to_cart_button {
    padding: 5px;
}
```
Regards
#184591 Copied
Viewing 6 results - 1 through 6 (of 6 total)