Docs

[3b1a2f46-a516-40cf-beba-b611930e4819]

Hi, I’ve got a couple of issues with Essential grid not displaying quite right and wondered if you could help.

1. the dropdown arrow on the sort button seems to lose it’s padding when you click it
2. Any ideas on how I would change the name of sort items from ‘Regular price’ to ‘Price’ and ‘Date’ to ‘Date added’? Would this need to be done through WooCommerce?

I will post a link below

Thanks

[3b1a2f46-a516-40cf-beba-b611930e4819]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in!

#1. It’s causing by some of your custom CSS. You can add this under Custom > CSS in the Customizer.

.esg-sortbutton-order.eg-icon-down-open.tp-desc {
  padding-left: 10px;
}

#2. You will need to change the WooCommerce function by custom filter function.That would be out of our support scope.

Cheers!

[3b1a2f46-a516-40cf-beba-b611930e4819]

Thanks for the help, much appreciated.

The filters are also not great on mobile. I want them to display on top of each other in full width rows.

For instance for the sorting element I’ve put the code below but it doesn’t work

@media (max-width: 767px) {
  .esg-sortbutton-wrapper {display:block!important; width:100%; float:left!important;}
}

Any ideas? If they can’t be 100% width then I’d like them to be centered.

[Christopher]

Hi there,

Please update your code to :

@media (max-width: 767px) {
.esg-filter-wrapper {
    display: block!important;
    width: 100%;
    float: left!important;
}
}

Hope it helps.

[3b1a2f46-a516-40cf-beba-b611930e4819]

Hi Christopher,

I’ve added that code and it’s not working. I’ve managed to get the search box centered but the sort button won’t.

I also can’t get them to display 100% width.

Thanks

[Rad]

Hi there,

You have to add width: 100%;

.esg-sortbutton-wrapper {
    float: none;
    text-align: center!important;
    width: 100%;
}

It was there in your CSS, but looks like you removed it.

@media (max-width: 767px) {
  .esg-sortbutton-wrapper {display:block!important; width:100%; float:left!important;}
}

Thanks!

[3b1a2f46-a516-40cf-beba-b611930e4819]

Hi Rad,

I took it back out because it wasn’t working. I’ve added it back in again.

.esg-sortbutton-wrapper {
    float: none;
    text-align: center!important;
    width: 100%;
}

This first piece of code shouldn’t be needed as I need the sort button to float right, which I’ve done. Adding 100% width to the wrapper seems to affect the container and the button stays the same width.

@media (max-width: 767px) {
  .esg-sortbutton-wrapper {display:block!important; width:100%; float:left!important;}
}

The second piece of code I have added back in and it doesn’t make a difference.

Thanks for the ongoing support.

[Rad]

Hi there,

Now, it’s the text-align is missing. Please try this.

@media (max-width: 767px) {
  .esg-sortbutton-wrapper {display:block!important; width:100%; float:left!important; text-align:center;}
}

What device and browser you’re testing? The button isn’t full-width in my view.

Thanks!

[3b1a2f46-a516-40cf-beba-b611930e4819]

Hi Rad,

That’s got them all centralised so it’s better than it was.

Thanks

[Lely]

You’re welcome!

Cheers!

[Author]

Posts