[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
  • #469416

    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
    Customer Support

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

    can you help me about columns?
    Thank you

    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 ๐Ÿ™‚


    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.

    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.


    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


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

    Thank you very much

    Lead Developer
    Lead Developer

    Did you get the margin working? ๐Ÿ™‚


    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

    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.