Return to previous page

2 columns for eshop - by vision4reality - on WordPress WooCommerce support

This topic has 19 replies, 4 voices, and was last updated 8 years, 5 months ago ago by Jack Richardson

vision4reality

Participant

May 23, 2016 at 13:49

Hello! could you tell me the way to create the shop in 2 columns and not 3?

#126834 Copied Theme version: 3.0.1 WooCommerce version: 2.5.5

18 Answers

vision4reality

Participant

May 23, 2016 at 14:07

Please, contact administrator
for this information.

#126839 Copied
Robert Hall

Support staff

May 23, 2016 at 14:13
Hello,

Please try to add this code in custom.css file
```
@media (min-width: 1200px) {
.products-grid.product-count-3 .product:nth-child(3n+1) {
    clear: none !important;
}
.products-grid.product-count-3 .product:nth-child(2n+1) {
    clear: both !important;
}
.products-grid.product-count-3 .product {
    width: 418px !important;
}
}
```
Here is a video tutorial how to create custom.css: https://www.youtube.com/watch?v=Qok2zRedRMY&feature=youtu.be.

Regards,
Robert Hall
#126841 Copied
vision4reality

Participant

May 23, 2016 at 14:24

Something weird with pics and columns could you see?
thanks alot!

Please, contact administrator
for this information.

#126846 Copied
Jack Richardson

Support staff

May 23, 2016 at 15:23
Hello,

The issue with background color has been fixed. Please check.
I’ve edited the code in child style.css file to this:
```
@media (min-width: 1200px) {
.products-grid.product-count-3 .product:nth-child(3n+1) {
    clear: none !important;
}
.products-grid.product-count-3 .product:nth-child(2n+1) {
    clear: both !important;
}
.products-grid.product-count-3 .product {
    width: 320px !important;
}
.products-grid.product-count-3 .product:nth-child(3n+1) {
  margin-left: 20px !important; 
}
}
```
Please check Shop page.

Best regards,
Jack Richardson.
#126859 Copied
vision4reality

Participant

May 23, 2016 at 17:48

Also i have problem after update 3.0.1 you set !important at background color and i can’t change from child anymore the bg color.

darl css
.container, .page-wrapper, .fixed-header, .fixed-header:hover {
background-color: #151515 !important;
}

child css (bg black color)
.container, .page-wrapper, .fixed-header, .fixed-header:hover {
background-color: #000 !important;
}

I could delete !important from dark css but i told you this to know the problem after update. thanks alot

#126904 Copied

Jack Richardson

Support staff

May 24, 2016 at 08:02

Hello,

You need change theme color to “light” in Theme Options > Color Scheme and then your code will work.

Best regards,
Jack Richardson.

#126938 Copied

vision4reality

Participant

May 26, 2016 at 10:49

Yes but i need the dark version! Because it not needs so much work to invert everything.
I deleted important from dark.css and is ok.
I have also problem with 2 columns. When you resize to mobile width it keeps 2 columns, i need 1 column!

#127289 Copied
Eva Kemp

Support staff

May 26, 2016 at 12:52
Hello,

To get one column per row on Shop page use this code in custom.css file:
```
@media (max-width: 480px) {.products-grid.product-count-3 .product:nth-child(n) {
    width: 100% !important;
}}
```
Regards,
Eva Kemp.
#127297 Copied
vision4reality

Participant

May 26, 2016 at 13:41

For some reason not working!

#127305 Copied

Robert Hall

Support staff

May 26, 2016 at 14:03

Hello,

Please provide us with FTP credentials in Private Content.

Regards,
Robert Hall

#127306 Copied

vision4reality

Participant

May 26, 2016 at 15:54

Also I would like the wrapper to be 100% of height. eg check homepage. Slider is off the page, how do i fix this? Slider is set to fullpage. Thanks alot

Please, contact administrator
for this information.

#127316 Copied Theme version: 3.0.1

Jack Richardson

Support staff

May 26, 2016 at 18:01

Hello,

The code is working now.
Please check Shop page now.

As for the slider try to set image as a background image http://storage1.static.itmages.com/i/16/0526/h_1464282027_6853127_0e59776f61.jpeg and not as a layer.

Best regards,
Jack Richardson.

#127323 Copied

vision4reality

Participant

May 26, 2016 at 19:00

When you start try resize the window os browser about at 1144px appears 3 columns for one moment and after that work ok if you continue decrease the size of window. Check it please

#127332 Copied

Jack Richardson

Support staff

May 26, 2016 at 19:03

Hello,

Please check the site on mobile devices. If you resize browser window you need clear browser cache and reload the page after each resizing.

Best regards,
Jack Richardson.

#127333 Copied

vision4reality

Participant

May 26, 2016 at 19:14

http://mobt.me/OJbb and please click to shop . In landscape has 3 columns

#127335 Copied
Jack Richardson

Support staff

May 26, 2016 at 20:39
Hello,

Do you want to have one column in landscape view?
You may try this css code:
```
@media (min-width: 984px) and (max-width: 1200px){
  .products-grid.product-count-3 .product {
    width: 100%;
}}
```
Best regards,
Jack Richardson.
#127342 Copied
vision4reality

Participant

May 27, 2016 at 09:53

Actually now is ok but it must keep 2 columns between about 1200~1100px width and continues until goes to extra narrow screen and turn to one column. The only problem is to keep 2 columns between about 1200~1000px because for one moment it turns to 3 columns.

EDIT: Is ok i change @media (min-width: 900px) from 1200 to 900 and now is ok.

#127375 Copied

Jack Richardson

Support staff

May 27, 2016 at 10:24

Hello,

We’re glad you managed to resolve the issue.

Best regards,
Jack Richardson.

#127379 Copied
Tagged: 2 columns, eshop, online shopping, responsive, user friendly, woocommerce, wordpress
Viewing 19 results - 1 through 19 (of 19 total)