Return to previous page

Number of columns and responsive - by TRUEcph

This topic has 8 replies, 3 voices, and was last updated 8 years, 8 months ago ago by Eva Kemp

TRUEcph

Participant

August 24, 2015 at 09:29

Hi

I was wondering how to change the number of columns on a row in the responsive view

I want it to only show 1 column pr. row when the screen goes below 980px (where there is a breakpoint today)

How is that possible?

#81843 Copied Theme version: 1.2 WooCommerce version: 2.4.5

7 Answers

Jack Richardson

Support staff

August 24, 2015 at 12:46

Hello,

Do you mean columns on Shop page?
Please show a screenshot what you want to achieve.

Thank you.

Best regards,
Jack Richardson.

#81915 Copied

TRUEcph

Participant

August 24, 2015 at 17:31

I figured it out with css and media quiry

Another thing. How to make the animated shopping icon stay white when you scroll.
It goes black when you scroll on the site?

#82019 Copied
Eva Kemp

Support staff

August 24, 2015 at 18:29
Hello,

Please use this code in 8Theme Options > Typography > Custom CSS > Global Custom CSS:
```
.fixNav-enabled .fixed-active .cart-design-2.design-white .cart-bag:before, .fixNav-enabled .fixed-active .cart-design-2.design-white .cart-bag .badge-number  {
    border-color: white;
}
.fixNav-enabled .fixed-active .cart-design-2.design-white .cart-bag .badge-number:before {
    box-shadow: 0px 0px 0px 35px #FFF inset !important;
}
.fixNav-enabled .fixed-active .cart-design-2.design-white .cart-bag .badge-number {
    color: #3D3D3D !important;
}
```
Regards,
Eva Kemp.
#82024 Copied
TRUEcph

Participant

August 24, 2015 at 19:26

Thx Eva

But the icon is still dark in the mobile version (when the burger menu appears) – how to also make that white?

#82030 Copied
Eva Kemp

Support staff

August 25, 2015 at 09:12
Hello,

Use this code in Custom CSS:
```
@media (max-width: 992px) {.cart-design-2 .shopping-cart-widget .cart-bag::before {
   border: 2px solid white;
}
.cart-design-2 .shopping-cart-widget .cart-bag .badge-number::before {
    box-shadow: 0px 0px 0px 35px white inset;}
.cart-design-2 .shopping-cart-widget .cart-bag .badge-number {
    background-color: #FFF;
    color: #3D3D3D;
}}
```
Regards,
Eva Kemp.
#82108 Copied
TRUEcph

Participant

August 25, 2015 at 09:13

Great – thx

BTW on chrome the mobile menu works fine, but in firefox it looks like there is a layer on top so you cant click the logo/menu/cart

Can you check for me please?

Jan

#82109 Copied
Eva Kemp

Support staff

August 25, 2015 at 09:16
Hello,

As I see you’ve added this code in child style.css:
```
.content.main-products-loop.col-md-12 {
    margin-top: -120px !important;
}
```
Remove it or edit it to
```
@media (max-width: 1200px) {.content.main-products-loop.col-md-12 {
    margin-top: -120px !important;
}}
```
and check the site then.

Regards,
Eva Kemp.
#82111 Copied
Tagged: columns, layout, number, responsive, themes, woocommerce, wordpress
Viewing 8 results - 1 through 8 (of 8 total)