Columns number mismatch on different screen sizes

[ericaharel]

Hi,

We are facing some products columns mismatch display.
in theme options, we set products to be presented in 2 columns in standard display.
and on my 13.3 in Asus laptop I do see it correctly, but on other bigger screens it present the products in 1 column..

screenshots attached:
1. as I see it on my laptop – correct presentations of products in 2 columns
2. as I simulated it on 21 inch desktop display – incorrect presentations of products in 1 column..

Is it a theme bug? or I we set something incorrectly in theme options?

Thanks,
Daniel & Erica

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Please test reduce by 1%: Sdd this to your Theme Options => Custom CSS

.woocommerce ul.products li.product.col-sm-6 {
    width: 49%;
}

[ericaharel]

Resolved!

1. I see that you eventually didn’t use the css code above.

Can you tell what was the problem and how you resolved it?
Thanks Daniel & Erica

2. Another topic:
What would be the best way to add text field input to appear on single-products?
we would like to give user the ability to write us their initial name letter in some products

can you please provide some code that we can set in functions.php
Thanks again Daniel & Erica

[David Martin – Support]

1) I don’t understand this? You need to add the code to the Theme Options => Custom CSS.

2) No, you would use a plugin such as this to add additional fields such as notes to the checkout page: https://woocommerce.com/products/woocommerce-checkout-field-editor/

[ericaharel]

thanks

[David Martin – Support]

No problem!

Thanks.

[ericaharel]

HI,

Sorry but the bug reappears again..
it looks like the css solution you provide above is not working due to it is .col-sm-4 and not col-sm-6

and it looks like it is not width issue. width is set on 33.3333%.. maybe it is something with the function that arranges items

Kindly see 3 attached screenshots with css that <li> receive..

I would expect 3rd to receive:

element.style {
    position: absolute;
    left: 568px;
    top: 0px;
    opacity: 1;
}

like in 13.3 inch screenshot example

waiting for your answer,
Daniel & Erica

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

The above CSS was just for the two column layout as initial requested.

The supplied URLs are not working. This is the error:

What URL do you experience this on?

– David.

[ericaharel]

Hi David,

here for example: https://ericaharel.com/product-category/backpacks/

the request is for 3 columns, currently on bigger screens than 13.3 it present 2 columns

[Kyle – SUPPORT]

Hi

I’m on a 27inch monitor and for me it’s 3 columns http://d.pr/i/1anyV/4d6Fa8xo

– Kyle

[ericaharel]

that is good!
strange, my customer use 20+ inch Mac with chrome and sees 2 columns..
and also I used this tool:
http://quirktools.com/screenfly/#u=https%3A//ericaharel.com/&w=1680&h=1050&a=1

and see 2 columns

[Kyle – SUPPORT]

http://d.pr/i/192fO/5XsTnMND

– Kyle