Left sidebar iPad (real iPad - not iPad Pro)

Hi there,

– in the GP customizer with iPad mode, the left sidebar is on the left

That's called "tablet mode". While iPad is a tablet, it's on the smaller side so it uses the mobile viewport's settings.

– in real iPad the left sidebar is at the bottom of the content
– if you look in Chrome using Toggle Device Tool using iPad the left sidebar is at the bottom of the content

Ipad shares viewport size with mobile devices. That's why the sidebar goes below the content.

There's a dilemma here:
While we can write a CSS for iPad's breakpoint (@media(max-width:768px) and (min-width:601px)) the issue is, it shares a breakpoint with some mobiles devices so they could get affected as well.

But if you don't mind that, try this:

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
div#content {
    flex-direction: row;
}

div#left-sidebar {
    order: -10;
}
}

i understand thank,

If i keep the current layout, how can i make the woo category page full width with image ?

Thank you

Not exactly sure how you intend for it to look like.

Can you provide any mockup images of how you want to appear?

On my woo category page without left menu all the content is align left and use 70% of the width space, the Product Thumbnail width size was 416px.

I just changed the Thumbnail width to 768px and the layout is good : (Customizing ▸ WooCommerce ▸ Product Images ▸ Thumbnail width )

For the left side bar menu, i will create a dropdown menu with the woo category for "iPad" size for fast access to change category

Thanks

Hi there,

can you share a link to the archives where i can see the issue?

Hi David, i just shared in Private information the credential to the staging server. Thanks

Hi David, any advice ?

Hi Simon - sorry your reply got overlooked yesterday.

Try this CSS:

@media (min-width: 600px) and (max-width: 1024px) {
    .woocommerce .wc-columns-container.wc-tablet-columns-2 .products {
        -ms-grid-columns: (1fr)[2] !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

It works great ! thank you very much 🤩

Awesome _ glad to be of help

Hi David, i have this Parse Error: ... columns:(1fr)[2];grid-template ...

Should it be like this ? -ms-grid-columns: (1fr , 2)

Thank you
Simon

Hi there,

no leave it as is, and ignore the error - its the old IE syntax for the modern repeat argument that will validate only at CSS Level 1.

thank you

You're welcome