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

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

  • Avatar: vision4reality
    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?

    18 Answers
    Avatar: vision4reality
    vision4reality
    Participant
    May 23, 2016 at 14:07
    Please, contact administrator
    for this information.
    Avatar: Robert Hall
    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

    Avatar: vision4reality
    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.
    Avatar: Jack Richardson
    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.

    Avatar: vision4reality
    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

    Avatar: Jack Richardson
    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.

    Avatar: vision4reality
    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!

    Avatar: Eva
    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.

    Avatar: vision4reality
    vision4reality
    Participant
    May 26, 2016 at 13:41

    For some reason not working!

    Avatar: Robert Hall
    Robert Hall
    Support staff
    May 26, 2016 at 14:03

    Hello,

    Please provide us with FTP credentials in Private Content.

    Regards,
    Robert Hall

    Avatar: vision4reality
    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.
    Avatar: Jack Richardson
    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.

    Avatar: vision4reality
    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

    Avatar: Jack Richardson
    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.

    Avatar: vision4reality
    vision4reality
    Participant
    May 26, 2016 at 19:14

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

    Avatar: Jack Richardson
    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.

    Avatar: vision4reality
    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.

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    May 27, 2016 at 10:24

    Hello,

    We’re glad you managed to resolve the issue.

    Best regards,
    Jack Richardson.

  • Viewing 19 results - 1 through 19 (of 19 total)

The issue related to '‘2 columns for eshop’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.