Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Support request] Column shop layout in desktop/ipad/mobile

Home Forums Support [Support request] Column shop layout in desktop/ipad/mobile

Home Forums Support Column shop layout in desktop/ipad/mobile

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #469416
    luigi

    Maybe it’s been asked before, sorry for eventualy duplicate
    I’m talkin about woocommerce loop/shop page
    I need to put correctly 3 column for desktop device, 3 column for ipad(landscape), 2 for ipad(portrait)
    one column for mobile all of them centered

    I tried many times but without success.

    i’m using Gp premium 1.5(I can’t update i receive an error)
    Thank you

    GeneratePress 2.0.1
    #469525
    Leo
    Staff
    Customer Support
    #469849
    luigi

    “It’s not possible to create the directory. gp-premium/backgrounds/functions”

    can you help me about columns?
    Thank you

    #470086
    Tom
    Lead Developer
    Lead Developer

    Here’s the cause of that error: https://docs.generatepress.com/article/updating-issues/#could-not-copy-file

    Have you tried using the WC columns option within the WC module? It has a desktop and mobile option.

    Let me know ๐Ÿ™‚

    #470154
    luigi

    I’ve installed the windows plugin but now Gp premium doesn’t show the upgrade.

    In aspect–> customize I set 3 columns for desktop and one for mobile but I need to show correctly the products in ipad (portrait and landascape) and there isn’t any other option. Can you try yourself how ugly it’s showed the shop page.
    I cant beleive that. I need to solve.

    #470371
    Tom
    Lead Developer
    Lead Developer

    WooCommerce columns are tough to manipulate, but we do have plans to add a tablet option into the Customizer option for them.

    For now, give this a shot:

    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : portrait) {
        .woocommerce .wc-mobile-columns-1 ul.products li.product, 
        .woocommerce-page .wc-mobile-columns-1 ul.products li.product {
    	width: 46.2%;
            clear: none !important;
        }
    
        .woocommerce .wc-mobile-columns-1 ul.products li.product:nth-child(2n+1), 
        .woocommerce-page .wc-mobile-columns-1 ul.products li.product:nth-child(2n+1) {
    	clear: both !important;
        }
    }

    iPad using landscape should use your desktop layout by default, so the above only targets portrait and forces 2 columns.

    Let me know – it might need some tweaking.

    #470643
    luigi

    It seems to work only for resolution between 769*1024 (I tested it on chrome)
    Really strange, but i’ve just encountered some problem with Ipad resolution

    maybe there will be some trick for that device.
    Thank you

    #470662
    luigi

    Understood. at that resolution woocommerce put a margin-left: 0;
    It’s sufficient to correct it.

    Thank you very much

    #470719
    Tom
    Lead Developer
    Lead Developer

    Did you get the margin working? ๐Ÿ™‚

    #470786
    luigi

    Yes I did
    I put a 2.8% margin-left and now the page looks fine (for 768*1024 resolution)
    I’m wondering if there is any way to center the column

    what do you think about?

    thank you

    #471037
    Tom
    Lead Developer
    Lead Developer

    Since the columns are using floats, it would be hard to center them.

    You currently have a max-width applied to each column, which is why they don’t look centered.

    I want to use flexbox or CSS Grid for the columns in the near future. That will make it much easier.

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.