[Resolved] WooCommerce breadcrumb and sort issue on Mobile

[Paul]

Hi there! So if you Check this out on mobile it puts the breadcrumbs and sort on two lines – whereas on the desktop it’s just one line across.

Can I make it one line on the mobile site?

Here is a example url – https://givepraiserecords.com/product-category/give-praise-records/

[Leo]

Hi Paul,

I’m seeing this on the desktop view:
https://www.screencast.com/t/nfndftDl

Is this not what you are seeing?

[Paul]

Yes! And also in mobile view it makes the breadcrumbs and sort area 2 lines – it breaks it up,

Thank you for checking this out! You folks are all so radical over there!

[Leo]

I believe the issue here is this extra <div> with max-width: 150px; attached:
https://www.screencast.com/t/SWoWCExg

That is not something added by GP. You can see the default style here:
https://gpsites.co/prime/product-category/clothing/hoodies-clothing/

Do you know where that might be coming from?

[Paul]

Great! Thank you! That fixed the desktop! Here is how it looks on mobile:

Can I fix that issue, so it’s all one one line?

Thank you!

[Paul]

oops sorry! Here is the image

https://imgur.com/ZKGoUbq

[Leo]

It’s already all in one line from what I can tell:
https://www.screencast.com/t/4fT5Uvvsc

When it’s not all in one line, it likely means that there isn’t enough space.

[Paul]

Thanks!

Is there anyway I can put the Sort By Latest on the upper line, so it’s like 2 columns right across from eachother?

[Leo]

Not possible with just CSS unfortunately – this isn’t something the theme can control.

[Paul]

Oh okay, No problem! Thank you very very much for the help on this!

Take care!

Paul

[Leo]

No problem 🙂

[Author]

Posts