[Support request] breadcrumbs and product order issue

[roadlink]

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;
}

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[roadlink]

Hi sure,

[David]

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?

[roadlink]

Like Niche could be very nice. https://prnt.sc/zvwppj

Thank you.

[Leo]

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.

[Ying]

Try this CSS 🙂

@media (max-width: 768px) {
    .entry-content {
        display: flex;
        flex-direction: column;
    }
    .woocommerce-breadcrumb {
        flex: 1;
    }
}

[roadlink]

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

[David]

Try this CSS:

@media(max-width: 768px) {
  .woocommerce.archive .woocommerce-breadcrumb {
    padding-bottom: 0;
    margin-bottom: 0;
  }
    .woocommerce-ordering select {
        padding-left: 0;
    }
}

[Author]

Posts