This topic has 9 replies, 3 voices, and was last updated 2 years, 5 months ago ago by Olga Barlow
Incorrect display of breadcrumbs (see image below)
Please give the code to replace the div wrapper for each link or provide the css code.
Thank you.
Hello,
Provide us with WP Dashboard and FTP access to your site, please. We’ll check the issue in more detail.
Regards
granted the necessary access
Hello,
Thank you. I have passed your issue to our developers. I’ll inform you once they fix the problem.
Regards
Hello,
Try to add the next code in Theme Options > Theme custom CSS:
.breadcrumb-trail .back-history {
position: absolute;
right: 0;
}
.breadcrumb-trail .back-history:before {
content: '\e902';
font-family: xstore-icons;
position: absolute;
left: -2px;
top: 50%;
-webkit-transform: translate(-100%,-50%);
transform: translate(-100%,-50%);
}
.breadcrumb-trail .page-heading .container {
padding-right: 200px;
line-height: 3ex;
height: 3ex;
overflow: hidden;
text-align: left;}
.breadcrumb-trail .page-heading .container div {
display: inline;
position: static;
}
.breadcrumb-trail {
padding-left: 15px;
padding-right: 15px;
}
Regards
Thank you!
When viewed on a computer, everything got better and became as it should.
Please write more css code for mobile computers, because links in breadcrumbs are cut off (in the screenshot I showed that the page has two words, and in breadcrumbs after the word “shop” everything else is cut off.
Thank you.
Hello,
Change the previous code to:
.breadcrumb-trail .back-history {
display: block;
margin-bottom: 15px;
}
@media screen and (min-width: 768px){
.breadcrumb-trail .back-history {
position: absolute;
right: 0;
}
.breadcrumb-trail .back-history:before {
content: '\e902';
font-family: xstore-icons;
position: absolute;
left: -2px;
top: 50%;
-webkit-transform: translate(-100%,-50%);
transform: translate(-100%,-50%);
}
.breadcrumb-trail .page-heading .container {
padding-right: 200px;
line-height: 3ex;
height: 3ex;
overflow: hidden;
text-align: left;
}
.breadcrumb-trail .page-heading .container div {
display: inline;
position: static;
}
.breadcrumb-trail {
padding-left: 15px;
padding-right: 15px;
}
}
@media (min-width: 650px) and (max-width: 992px) {
h1.page-title {
height: 170px !important;
}
}
@media screen and (max-width: 649px) {
h1.page-title {
height: 180px !important;
width: 100%;
font-size: 24px !important;
}
.header-bottom {
margin-bottom: 50px;
}
}
Regards
Thank you Olga 🙂
We can mark the topic as solved
Hello,
You are welcome.
Regards
Tagged: breadcrumbs, change, style, templates, woocommerce, wordpress, yoast
The issue related to '‘Yoast Woocommerce Breadcrumbs change style style’' has been successfully resolved, and the topic is now closed for further responses