New Landing › How can we help? › Atelier › Mobile Homepage Product Layout

Viewing 15 posts - 1 through 15 (of 21 total)
1 2
  • Back to forum
    Posted in: Atelier
  • April 19, 2016 at 5:36 am #262395
    geminicontacts
    Member
    Post count: 27

    Currently on homepage (mobile version) only one product shows at a time.
    How can I adjust this?
    I’d like to show at least two products at a time.

    April 19, 2016 at 8:03 am #262410
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Hi

    Add this to your custom css:

    @media only screen and (max-width: 767px) { 
.woocommerce ul.products li.product.col-sm-3 {
  float: left;
  width: 50% !important;
}
}

    – Kyle

    April 20, 2016 at 5:22 am #262645
    geminicontacts
    Member
    Post count: 27

    Unfortunately this did not work. There was no change in product size.

    April 20, 2016 at 7:40 am #262655
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,
    It should work. Please provide me specific page url to check in detail.
    Thanks
    Mohammad

    April 20, 2016 at 4:35 pm #262808
    geminicontacts
    Member
    Post count: 27
    This reply has been marked as private.
    April 22, 2016 at 6:32 pm #263307
    David Martin – Support
    Moderator
    Post count: 20834

    Hi,

    1)

    Please test this:

    @media only screen and (max-width: 479px) {
.woocommerce .products .product.product-layout-grid {
    width: 100%!important;
    float: left;
}
.owl-carousel .owl-item {
    float: left;
    width: auto!important;
    max-width: 185px!important;
}
}

    2) Set this option to “Standard” Theme Options => WooCommerce Options => Shop Options => Product Display Layout

    Thanks.

    April 23, 2016 at 4:37 am #263345
    geminicontacts
    Member
    Post count: 27

    We are close!
    Thank you.

    1) 2 products show, however, the window cuts off the second product. So you see half of the products.

    2) The problem here is that I would like the default to be the grid layout, and when standard is selected it goes to the 4 column view. Currently, with grid layout selected as the default, both grid and standard show the same amount of columns.

    After I changed the default to standard, I see 4 columns when I first open the shop page. When I click on grid I see 5 columns. This is fine – but I would like the reverse. To have grid as default with 5 columns and standard as 4.

    April 25, 2016 at 12:34 pm #263561
    David Martin – Support
    Moderator
    Post count: 20834

    1) Please adjust the max-width, as below:

    @media only screen and (max-width: 479px) {
.woocommerce .products .product.product-layout-grid {
    width: 100%!important;
    float: left;
}
.owl-carousel .owl-item {
    float: left;
    width: auto!important;
    max-width: 180px!important;
}
}

    2) Unfortunately that is not possible to combine the layouts as you describe.

    Thanks

    April 25, 2016 at 1:05 pm #263578
    geminicontacts
    Member
    Post count: 27

    Hello,

    I don’t intended to combine them.
    I’d like grid to be the default (as set in theme options) and then standard to be a different layout.
    Currently they display the same number of columns when grid is set to default layout for shop page.

    April 27, 2016 at 4:16 pm #264140
    geminicontacts
    Member
    Post count: 27

    Checking to see if you all saw my last response from 2 days ago.

    April 27, 2016 at 6:37 pm #264173
    David Martin – Support
    Moderator
    Post count: 20834

    Hi,

    2) On your shop page this is already happening: http://d.pr/i/19egR Ex: Grid 5 cols and Standard 4. Seen here: http://geminicontacts.com/shop/

    Thanks.

    April 29, 2016 at 6:10 am #264469
    geminicontacts
    Member
    Post count: 27

    Yes this is when shop default is set to Standard.
    I would like to set default to grid and have it behave in the same way.

    So the shop is set to grid (5 columns) – visitor navigates to shop page and sees grid layout. They click on standard and see standard layout with 4 columns..

    May 3, 2016 at 9:54 am #265004
    David Martin – Support
    Moderator
    Post count: 20834

    Hi,

    That is very hard to do smoothly as the grid classes are already set to 5 columns.

    You can try this:

    .post-type-archive-product ul.products li.product.product-layout-standard.col-sm-sf-5 {
    width: 25%!important;
}

    Thanks.

    May 6, 2016 at 8:04 pm #265927
    geminicontacts
    Member
    Post count: 27

    Hi David,
    I think we are still missing each other.
    5 column is fine. How do I set default to grid (5 column) and have standard be 4 columns?

    May 9, 2016 at 6:31 pm #266276
    David Martin – Support
    Moderator
    Post count: 20834

    You can choose that here: Theme Options => WooCommerce Options => Product Display Layout => Grid.

    I can no longer see your site without a login, please add the WP details for me.

    Thanks.

  • Back to forum
    Posted in: Atelier
Viewing 15 posts - 1 through 15 (of 21 total)
1 2

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