Return to previous page

2 product rows on mobile - by nic_and_mel

This topic has 6 replies, 4 voices, and was last updated 9 years, 10 months ago ago by Jack Richardson

nic_and_mel

Participant

January 27, 2016 at 23:44

Hello!

I am looking for a way to have 2 product rows on mobile portrait.

I have tried to use the code:

@media (max-width: 480px) { .products-grid.product-count-4 .product:nth-child(n) {
width: 50% !important;
}}

That I found on another request for this, where it worked. But it does not work for me.

1, Is it the correct code
2, where should I place it (I tried the style.css in my child theme, and also in custom css….)

#110403 Copied

5 Answers
Robert Hall

Participant

January 28, 2016 at 08:54
Hello,

Please add this code in Theme Options->Custom CSS->Custom CSS for mobile.

.product { width: 50% !important; }

Regards,
Robert Hall.
#110451 Copied
nic_and_mel

Participant

January 28, 2016 at 14:13

Hi!

Thanks! Worked great!

Thee more questions:

1. Is it possible to have the menu in the sidebar on my shop page to be closed initially (now all categories are open, so its a long list. I just want to se the main categories (Jewellery, Bracelets, Necklaces) when user enters the page.

2. Is it anyway to show the sidebar above the products on mobile?

3. The mobile menu slides in from the left. I like it better when its from the top down, covering the “page”. Is these a feature available, or am I stuck with the sliding in from the left?

Best regards
Daniel

#110533 Copied

Eva Kemp

Participant

January 28, 2016 at 16:55

Hello,

1. To close first category, edit wp-content/themes/woopress/js/etheme.js file. Find and comment out line 1808
$this.find('>li').first().find('.open-this').html(minusIcon).parent().addClass('opened').find('ul.children').show();

2. Go to Theme Options > Blog Layout > Sidebar position for responsive layout > select “Top”.

3. Unfortunately there is no such feature. Sorry.

Regards,
Eva Kemp.

#110594 Copied

nic_and_mel

Participant

February 16, 2016 at 00:19

Hi!

I now have 2 product rows on the shop page/category page, and this is great. However on the single product page on mobile, it is also 50%, so it only uses half the screen in portrait mode…

Is there anyway to have two products in a row on shop/category-pages, but use the full screen on the single product pages?

Best regards
Daniel

#113163 Copied
Jack Richardson

Support staff

February 16, 2016 at 09:54
Hello,

Please use this css code instead of the previous one in Custom CSS for mobile:

.products-grid .product { width: 50% !important; }

Best regards,
Jack Richardson.
#113222 Copied
Viewing 6 results - 1 through 6 (of 6 total)