Archived topic
breadcrumbs and product order issue
8 replies · Started by roadlink on January 30, 2021
Hello,
I am having shift issue in mobile.
Can you give any suggestion to fix it?
https://prnt.sc/xw5rqr
I use below css from niche.
.main-navigation ul li.slideout-toggle {
display: none !important;
}
.woo-filter-toggle,
.woocommerce.archive .woocommerce-breadcrumb {
padding: 10px 0;
margin-right: 20px;
float: left;
line-height: 30px;
}
.woocommerce .woocommerce-result-count {
float: right;
margin-right: 20px;
line-height: 30px;
}
.woocommerce-ordering select {
max-width: 200px;
border: 0;
line-height: 30px;
}Hi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
Hi sure,
Hi there,
there isn't enough room on mobile for the ordering 3 dots and the label to stay inline on mobile. So how do you want it to be displayed?
Like Niche could be very nice. https://prnt.sc/zvwppj
Thank you.
I'm not sure if there is a solution for this as your texts are a lot longer than the text in Niche?
It just looks like there is simply not enough room as David mentioned.
Try this CSS :)
@media (max-width: 768px) {
.entry-content {
display: flex;
flex-direction: column;
}
.woocommerce-breadcrumb {
flex: 1;
}
}Hello Ying,
Thank you. It did the job. Perfect.
Just wonder if we can narrow the gap between 2 elements in there
https://prnt.sc/zxzvhu
Try this CSS:
@media(max-width: 768px) {
.woocommerce.archive .woocommerce-breadcrumb {
padding-bottom: 0;
margin-bottom: 0;
}
.woocommerce-ordering select {
padding-left: 0;
}
}