Alignment of the text in the product catalog (tablet view).

Hi there,

Woocommerce defaults to single column on tablet, what you are seeing is that the image is not filling the column. Tom provides a CSS solution to make the tablet 2 columns which is better here:

https://generatepress.com/forums/topic/column-shop-layout-in-desktop-ipad-mobile/#post-470371

Check the output on a real device or responsive browser tools as the WP Customizer Responsive views are not great.

Ok, David, the review on all the output devices will be postponed, since I do not have a tablet at this time ...

Thank you.

Your browser dev tools have responsive views - not 100% accurate to a real device but will give you a much better view.

Hello David, look, I tried the Css in the view of the tablet, but there was no result, the text is still out of the picture. Ideally, it would be nice to see two columns with text aligned within the image in the tablet view ...I will have made some mistake?

thanks for your attention.
I share the image with the code

Hi there,

i added the CSS to the very top of your CSS stack using the browser dev tools, this is what i see when viewing this on my iPad Simulator ( which is 100% accurate ):

Hi David, I had left this topic for a while, but now I resume it.

I checked the CSS on an external tablet, but after applying the CSS it still maintains a single column, just like the view in WordPress ... the css is inserted at the moment, in case you want to take a look

Your help is appreciated.

1vendedor@cechile.com
123

Hi there,

I'm getting a 502 bad gateway error when trying to view your website - can you double-check?

Let me know :)

Hi Tom, sorry for the mistake. But now it's working ...

Thank you

What if you add this?:

@media (max-width: 768px) and (min-width: 700px) {
    .woocommerce #wc-column-container.wc-mobile-columns-1 .products {
        -ms-grid-columns: 1fr 1fr !important;
        grid-template-columns: 1fr 1fr !important;
    }
}

Hi Tom, install it but it says: "It cannot be saved because there is 1 incorrect setting".

Image

Regards

It doesn't like the -ms-grid-columns: 1fr 1fr; part. You can try it without, or you can add CSS using one of the other methods here: https://docs.generatepress.com/article/adding-css/

Hi Tom, I inserted the code in style css ... but I don't see any changes.
I expected to see two columns.
Will I have made a mistake?

Stile css theme child

Tablet view

I appreciate your time

I edited Tom's code here by adding !important to each of the rules it should take effect.

Hi David, I added the css and I see it works fine. I just added the last edited code ...only that

I attached a view of the css editor

view tablet in the browser

Thanks for your help