2 products per row on mobile !!

I’m grateful it worked and looks better than before thank you but then that darn product is sitting right next to the category catalog as if its a catagory instead of sitting in the spot down below.
https://ibb.co/mhnPDc
Do you like how the store is set up so far? :3

Hello @endgame421,

Sorry for the delayed response.

It seems you have removed the theme or changed the contents as I cannot see any old content there in the site. Do you still need assistance regarding that?

Feel free to ask if you need anything.

Thank you.

Hi Sam,

Great you’re helping so much people. I tried all the code you gave but my mobile view on the webshop stays a single column. Can you help me out making a 2 column view on mobile site.

The site is https://tijdvoorhout.nl/product-categorie/horloges/

Thanks in advance.

Deborah

Hello @deborahvanbezu,

Hope you are doing well.

As all the sites have different codding so the other CSS will not working on your end.

However, you can try adding this CSS to your Custom CSS/Additional CSS for adjusting that.

@media screen and (max-width: 980px){
.et_woo_container_column.et_pb_column {
    width: 50% !important;
}}

Hope that helps.

Thank you.

Hi Sam,

Thank you, it works partly. For the page https://tijdvoorhout.nl it didn’t.

The rest is working fine!!

Do you know a solution for that to?

• This reply was modified 6 years, 6 months ago by deborahvanbezu.

Hello @deborahvanbezu,

You can try adding this CSS to your Custom CSS/Additional CSS for adjusting that in homepage:

@media screen and (max-width: 479px){
.et_pb_column .woocommerce ul.products li.product:nth-child(n) {
    width: 50% !important;
}}
ul.products {
    min-height: auto;
}

Hope that helps.

Thank you.

Thank you Sam, it works.

Have a nice weekend!!

Hi Sam,just wondering if you can have a look at product

For the life of me can’t work out how to get 2 products on mobile.

• This reply was modified 6 years, 6 months ago by paulpa82.

Hello @paulpa82,

Hope you are doing well today.

You can try adding this CSS to your Custom CSS/ Additional CSS to see if that fixes the issue for you.

@media screen and (max-width: 450px){
.woocommerce-page ul.products li.product {
    width: 45% !important;
}
.site-inner {
    padding: 0;
}}

Hope That helps.

Thank you.

Thank you so much!!!!

Im still stuck on a few other spots:

I would like to do the same for the New Products on front page for mobile. Have 2 per column.

Also when adding items to the cart I would like to display 2 per row if possible.

Thanks in advance Sam, saved me heaps of time.

• This reply was modified 6 years, 6 months ago by paulpa82.

Hello @paulpa82,

You can try adding this for making two products in the homepage and the cart page:

@media screen and (max-width: 450px){
.woocommerce ul.product_list_widget li {
    min-height: 275px;
    width: 45% !important;
}
.woocommerce-cart-form__cart-item.cart_item {
    width: 48%;
    float: left;
    margin: 0 1%;
}}

Hope that helps.

Thank you.

Thank youuuuuuu so much Sam. You have saved me week.

My last question for mobile. Is there anyway to stop the short description from displaying on mobile and the image size of the products to be smaller.

Dev site is 13.211.227.69

Hello @paulpa82,

I am not sure which description you are referring to. Can you please share a screenshot of what you are referring to so that I can help you better regarding that.

Looking forward to helping you.

Thank you.

Thanks Sam it’s the description above the add cart button and below price.

If you scroll down the full description is there.

On mobile you can see on this page:

https://13.211.227.69/product/presale-lily-and-george-sylvie-swan/

Also the pics are too big for mobile I would like to make it more mobile friendly if easy.

Thank you for all your help so fsr

Hello @paulpa82,

You can try adding this CSS to your Custom CSS/ Additional CSS for removing the description in mobile device:

@media screen and (max-width: 771px){
.woocommerce-product-details__short-description {
    display: none;
}}

For adjusting the image size you can try adding this CSS

@media screen and (max-width: 771px){
.woocommerce-product-gallery__image {
    max-width: 380px;
    margin: auto;
}}

Hope that helps.

Thank you.