Woo Commerce Product Pages are NOT Mobile Responsive

Hello,

Can you please share some screenshot so that I can understand it clearly and help you to fix it?

Sure how can I do that?

Hello there, thank you for your response ??

This is the shop archive page which looks great
https://prnt.sc/p6qs76
This is the correlating page on the website https://lafleurdechocolat.com/shop/

This is the homepage with the same Ocean WP Header but the menu and logo are being cut off the screen…
https://prnt.sc/p6qtc7
This is the correlating page on the website https://lafleurdechocolat.com/

This is the bottom of the single product page, the related products are all jumbled and cut off…
https://prnt.sc/p6qu3d
This is an example product page on the website https://lafleurdechocolat.com/product/salted-caramel-and-kalamansi-ganache-twin-heart/

Here you can see the options within the composite and bundle woo commerce products are unreadable and not aligned to the left as everything else is…
https://prnt.sc/p6quqq
This is an example of a complex bundled/ composite product page on the website
https://lafleurdechocolat.com/product-category/gift-hampers/

Thank you SO much for looking into this ??

This video shows the related products showing up in a single column on mobile using the default woo-commerce storefront theme. This is how it should work on your theme… I chose Ocean WP as it was recommended as one of the best Woo Commerce themes so I am a little disappointed… Now that Woo-commerce are changing for every single plugin and feature you are in a great position to provide an incredible theme to millions of woo commerce users…

https://cl.ly/98f79568b04c

SomewhereWarm Woo-commerce plugin developers kindly gace me this CSS snippet, but it is not working 100%

.bundle_form .bundled_products {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.bundle_form .bundled_products .bundled_product {
width: 30%;
list-style: none;
}

——————————–

Here is a test composite product containing the amended bundled product:
https://lafleurdechocolat.com/product/build-your-own-gift-hamper-test-for-somewhere-warm/

Here is the amended bundled product with the grid view
https://lafleurdechocolat.com/product/chocolates-6-bundle-for-gift-hamper-test-for-somewhere-warm/

The menu is appearing fine on your site. There is no issue as you mentioned.

For the products, use the below code and let me know it fixes the issue or not –

.component:not(.selection_thumbnail_hidden) .composited_product_details_wrapper>.details {
    width: 100%;
}
span.theme-select {
    width: 280px;
}
.woocommerce div.product form.cart .variations label {
    white-space: nowrap;
}
.bundle_form .bundled_product.product {
    overflow: visible !important;
}

Hello

Thank you for getting back to me ??

You didn’t see the issue because SomewhereWarm developers gave me some code which sort of fixed part of the issue.

I have started adding your code, but it’s causing fatal errors in conjunction with the code I mentioned above from SomewhereWarm. See screenshot
https://prnt.sc/p7x85n

I removed their code and just tried yours which did not work either…

I have now removed both yours and their code. Please could you take another look?

Also please can you help me align all ‘add to cart’ buttons as they look terrible at different heights… Is there a way to hide the product title in the archive/shop view? Perhaps a hover overlay with the title would fix this issue?
https://prnt.sc/p7x98e

Thank you in advance

Hello,

The code is correct. I think you have some open brackets on previous code which is giving the error.