New Landing How can we help? Atelier Columns number mismatch on different screen sizes

Viewing 12 posts - 1 through 12 (of 12 total)
  • Posted in: Atelier
  • #285456
    ericaharel
    Member
    Post count: 7

    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.
    #285672
    David Martin – Support
    Moderator
    Post count: 20834

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

    .woocommerce ul.products li.product.col-sm-6 {
        width: 49%;
    }
    #285705
    ericaharel
    Member
    Post count: 7

    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

    #285874
    David Martin – Support
    Moderator
    Post count: 20834

    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/

    #286157
    ericaharel
    Member
    Post count: 7

    thanks

    #286317
    David Martin – Support
    Moderator
    Post count: 20834

    No problem!

    Thanks.

    #286424
    ericaharel
    Member
    Post count: 7

    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.
    #286608
    David Martin – Support
    Moderator
    Post count: 20834

    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.

    #286928
    ericaharel
    Member
    Post count: 7

    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

    #286932
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Hi

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

    – Kyle

    #286935
    ericaharel
    Member
    Post count: 7

    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

    #286936
    Kyle – SUPPORT
    Moderator
    Post count: 35880
Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register