Digital experiences for all disciplines
New Landing › How can we help? › Atelier › Columns number mismatch on different screen sizes
New Landing › How can we help? › Atelier › Columns number mismatch on different screen sizes
- This topic has 11 replies, 3 voices, and was last updated 8 years by Kyle – SUPPORT.
-
Posted in: Atelier
-
August 2, 2016 at 11:36 am #285456
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 & EricaAttachments:
You must be logged in to view attached files.August 3, 2016 at 12:21 pm #285672Please test reduce by 1%: Sdd this to your Theme Options => Custom CSS
.woocommerce ul.products li.product.col-sm-6 { width: 49%; }
August 3, 2016 at 2:30 pm #285705Resolved!
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 & Erica2. 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 productscan you please provide some code that we can set in functions.php
Thanks again Daniel & EricaAugust 4, 2016 at 11:00 am #2858741) 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/
August 6, 2016 at 3:03 pm #286157thanks
August 8, 2016 at 1:19 pm #286317No problem!
Thanks.
August 8, 2016 at 7:53 pm #286424HI,
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-6and 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 & EricaAttachments:
You must be logged in to view attached files.August 9, 2016 at 12:47 pm #286608The 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.
August 11, 2016 at 8:00 am #286928Hi 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
August 11, 2016 at 8:08 am #286932August 11, 2016 at 8:24 am #286935that 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=1and see 2 columns
August 11, 2016 at 8:29 am #286936– Kyle
-
Posted in: Atelier
You must be logged in and have valid license to reply to this topic.