- This topic has 7 replies, 2 voices, and was last updated 4 months, 2 weeks ago by
David.
-
AuthorPosts
-
October 14, 2020 at 3:07 am #1488202
Isaac
Hi there,
First of all, thanks for your support and the development of this wonderful theme.
I’m experiencing an issue on mobile view working with Elementor Pro and Woocommerce. If you go to my main page you can see a couple of products in 2 columns inside a 2 columns layout. In mobile view I want these 2 products to cover the 100% of the screen but they don’t, they appear in 1 column covering 50% of the screen, on the left side. Same happens in the “Cursos” page, but I got this same design in the product page and there everything looks good everywhere.
While working on the design in my computer everything is working as it should, and the preview of Elementor is correct. Also, If I use the tools of Chrome to check the mobile view, again everything looks fine, but when I go to real mobiles this 2 products are placed on the 50% left side of the screen.
If I uncheck the Woocommerce option in GeneratePress Premium, everything works fine but then I loose some functionality that I would like to keep.
Hope you can help me. Thanks!
October 14, 2020 at 4:54 am #1488328David
StaffCustomer SupportHi there,
in Customizer > Layout > Woocommerce – what happens if you set the columns to 1 – theres options for Desktop, Tablet and Mobile
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 14, 2020 at 4:59 am #1488336Isaac
Hi David,
Thanks for your answer. I already did it, and actually in the preview area every looks great, but then when I check on the mobile, it is still half screen. I also clean caché before to check.
HERE you can check how I see everything
October 14, 2020 at 5:10 am #1488351David
StaffCustomer SupportCan you link me to a page where i can see the issue ?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 14, 2020 at 5:12 am #1488355Isaac
October 14, 2020 at 8:12 am #1488759David
StaffCustomer SupportSo Elementor is controlling the single column output. But it looks like they neglected to overwrite the Woocommerce plugin CSS that defines the width of those columns.
Try adding this CSS to overwrite that:
@media only screen and (max-width: 768px) { .woocommerce ul.products[class*="columns-"] li.product, .woocommerce-page ul.products[class*="columns-"] li.product { width: 100%; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 14, 2020 at 8:36 am #1488797Isaac
That works! Thank you very much David
October 14, 2020 at 8:47 am #1488817David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.