Remo Feb 1, 2018 · 4:41 am #8674 Hello
First of all thanks for such a great theme. I’m using it and I love it.
But I think theme is not responsive for woocommerce product pages. Dekatop is ok, but when it comes to mobile phone, product image, gallery and short description sections are using half of the screen and they ate stucked. How can I fix this, with css? What will the code be like?
This is my product page. (by the way you can put this site to your references ?)
https://www.noiseash.com/product/matchtonix-darkwolf/
Best regards…
Andrew Misplon Puro Feb 1, 2018 · 10:55 am #8676 Hi Remo
Thanks for your support, great to hear from you 🙂
In your Custom CSS you have:
.woocommerce .product .product-info-wrapper, .woocommerce .product .summary {
width: 58%;
}
.woocommerce .product .images {
width: 38%;
}
Please, try wrapping those rules in a media query like this:
@media (min-width: 769px) {
.woocommerce .product .product-info-wrapper, .woocommerce .product .summary {
width: 58%;
}
.woocommerce .product .images {
width: 38%;
}
}
Let me know how that goes.
Remo Feb 1, 2018 · 11:24 am #8677 Thamk you Andrew dor your support. When I applied the cose from custom css, nothing has changed.
Naturally, shouldn’t we enter higher values tjan 58% and 38% to make content bigger? But when I try this too, it didn’t work.
Andrew Misplon Puro Feb 1, 2018 · 11:28 am #8681 Hi, the issue is that the rules added are being applied to mobile too which is the elements aren’t using the full screen size.
I can’t see any change in your custom css on the live site. Is the change still in place? Do you have any caching in place?
Remo Feb 1, 2018 · 11:52 am #8683 Hi,
I’ve updated css code again. there should be new modified code.
Andrew Misplon Puro Feb 1, 2018 · 1:30 pm #8684 Thanks. Sorry for not be clearer. Please, replace the original rules with my rules wrapped in the media query. At the moment, my new rules have been added to the end of your Custom CSS but they are being overridden by the first rules at the start of your Custom CSS. Put another way, remove these rules:
.woocommerce .product .product-info-wrapper, .woocommerce .product .summary {
width: 58%;
}
.woocommerce .product .images {
width: 38%;
}
and replace them with:
@media (min-width: 769px) {
.woocommerce .product .product-info-wrapper, .woocommerce .product .summary {
width: 58%;
}
.woocommerce .product .images {
width: 38%;
}
}
Remo Feb 1, 2018 · 1:51 pm #8685 Thank you so much Andrew, yes it solved the problem.
Andrew Misplon Puro Feb 1, 2018 · 2:07 pm #8686 Super, glad to hear that helped. All the best.