Hello,
Can you please send me a creenshot?
Thanks
i give you screenshot link i sent to you single product page
when i remove this plugin this problem is solved, namely this plugin causes the broken breadcrumb
that is the screenshot link
https://drive.google.com/file/d/1FEi0XUR9sVNfpHgfHGb2MLi-go7UfyCy/view?usp=sharing
Hello,
Sorry for the late but we checked and don’t see the issue. I checked with my iPhone 12 also desktop different responsive view all look like this https://prnt.sc/bYzETrLOvJ4S
breadcrumb bottom of image as you told in screenshot.
Thanks
Hi,
In 768px resolution I got this issue please this CSS write in
Appearance => Customize => Additional CSS
.woocommerce .woocommerce-breadcrumb {
clear: both;
}
Let me know how it works.
Thanks
Breadcrumb problem solved but there is another problem between 768px and 922px resolution the page will not responsive exactly if i get a resolution between 768px and 922px, such as 800px there is happening a gap right side of image i dont want it. The appearance should be like either tablet and mobile appearance (full image), or pc appearance (image and right side informations).
The gap is mistake. i send you a link
https://drive.google.com/file/d/1Nf5uXQwJEfcGFCgXQ-bCTDoW6NOrhxDX/view
-
This reply was modified 9 months, 3 weeks ago by
musa1111.
-
This reply was modified 9 months, 3 weeks ago by musa1111.
-
This reply was modified 9 months, 3 weeks ago by musa1111.
What should i do in this case? Can i solve it with CSS? Any suggestion?
By the way when i deactivated this plugin the problem is solved. I think this plugin causes the problem
-
This reply was modified 9 months, 3 weeks ago by musa1111.
Try this CSS but some breakpoint is not real device with I think can ignore that break points
@media (max-width: 921px){
.woocommerce div.product div.images, .woocommerce div.product div.summary, .woocommerce #content div.product div.images, .woocommerce #content div.product div.summary, .woocommerce-page div.product div.images, .woocommerce-page div.product div.summary, .woocommerce-page #content div.product div.images, .woocommerce-page #content div.product div.summary {
float: right;
width: 48%;
clear: none;
}
}
Thanks
Now there is another problem happened, under the 768px product title part is divided to two parts i send to you a screenshot link
https://drive.google.com/file/d/1FtDLuNoisWE0yzxZRtyNdJ0g0UEi4PHl/view
Please remove the previous code last code need specific resolution condition.
I REMOVE (.woocommerce .woocommerce-breadcrumb {
clear: both;
})
THIS CODE AFTER I PASTE
(`@media (max-width: 921px){
.woocommerce div.product div.images, .woocommerce div.product div.summary, .woocommerce #content div.product div.images, .woocommerce #content div.product div.summary, .woocommerce-page div.product div.images, .woocommerce-page div.product div.summary, .woocommerce-page #content div.product div.images, .woocommerce-page #content div.product div.summary {
float: right;
width: 48%;
clear: none;
}
}`)
THIS CODE BUT THE PROBLEM STILL SAME
https://drive.google.com/file/d/1FtDLuNoisWE0yzxZRtyNdJ0g0UEi4PHl/view
No I told last code to remove
keep it
.woocommerce .woocommerce-breadcrumb {
clear: both;
}
Remove
@media (max-width: 921px){
.woocommerce div.product div.images, .woocommerce div.product div.summary, .woocommerce #content div.product div.images, .woocommerce #content div.product div.summary, .woocommerce-page div.product div.images, .woocommerce-page div.product div.summary, .woocommerce-page #content div.product div.images, .woocommerce-page #content div.product div.summary {
float: right;
width: 48%;
clear: none;
}
}
Try this you can change the PX as you need
@media (min-width: 768px) and (max-width: 991.98px) {
.woocommerce div.product div.images, .woocommerce div.product div.summary, .woocommerce #content div.product div.images, .woocommerce #content div.product div.summary, .woocommerce-page div.product div.images, .woocommerce-page div.product div.summary, .woocommerce-page #content div.product div.images, .woocommerce-page #content div.product div.summary {
float: right;
width: 48%;
clear: none;
}
}
ok its solved i made it (min-width: 769px) and the problem has been finished thanks for your attention
-
This reply was modified 9 months, 3 weeks ago by musa1111.
