Woocommerece / Shop page – Mobile layout – Products are not in a grid

[serieux]

Hi,

I’m trying to fix the layout of the mobile site for the products/shop/woocommerce page.

The products seem to be out of line.

I have added some custom CSS ive found on the support page, they have slightly helped but haven’t fixed the problem.

Im trying to make all the products aligned and properly displayed in an organised fashion.

Custom CSS i have added:

@media only screen and (min-width: 480px) {
li .product-details {
height: 45px;
overflow: hidden;
text-overflow: ellipsis;
}

@media only screen and (max-width: 479px) {
.woocommerce-count-wrap{display:none;}
.woocommerce-ordering{display:none;}
ul.products{border-top:0px;}
}

Screenshot also attached.

Thanks.

Attachments:

You must be logged in to view attached files.

[laranz – SUPPORT]

Hi,

Try this Custom CSS.

@media only screen and (min-width: 480px) {
.products li { height: 280px; }
}

Let us know,

Thanks,
laranz.

[serieux]

Hi Thanks for the reply, but that did not work.

Any other suggestions?

Can you also please help me put the text ‘Menu’ next to the menu icon for mobile please?

Thanks,

Dan

[Kyle – SUPPORT]

Hi

Try this:

@media only screen and (max-width: 767px) { 
ul.products li.product .product-details {
  min-height: 60px;
  max-height: 50px;
}
}

and for the mobile menu:

#logo a.show-main-nav:before {
  content: "MENU";
  margin-right: 6px;
}

– Kyle

[serieux]

Thank you,

It works.

[Mohammad – SUPPORT]

Hi,
You most welcome. I’m glad that issue resolved. Great thanks to Kyle.
Thanks 🙂
With Best Regards
Mohammad