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

[José]

Hello, I already have the site on the server. I’m testing the views of the woocommerce product catalog on desktop computers, tablets and mobile devices. I noticed that the product text is out of the picture in tablet view mode. I have it aligned to the left but it is outside the image.
I do not know if this configuration is normal for the view of the tablet, but I do not like how it looks.

The assistance is appreciated.
Username: support
password: abcd

image

<script async src=”//s.imgur.com/min/embed.js” charset=”utf-8″></script>

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[José]

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

Thank you.

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[José]

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

[David]

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 ):

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[José]

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

[Tom]

Hi there,

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

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[José]

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

Thank you

[Tom]

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;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[José]

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

Image

Regards

[Tom]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[José]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[José]

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

[Author]

Posts