2 or 3 product blocks per row for mobile

Site URL: https://www.jivamorelife.com

Hi! I am trying to show multiple product blocks per row in mobile view. When I am in the web view, I have 4 blocks, but when I switch to mobile, they stack and are only 1 per row. How can I show 2 or 3 product blocks per row on mobile?

For example, I am trying to do it on this page: https://www.jivamorelife.com/watercolor-splatters

On 4/30/2021 at 9:42 AM, Radhika22 said:

Site URL: https://www.jivamorelife.com

Hi! I am trying to show multiple product blocks per row in mobile view. When I am in the web view, I have 4 blocks, but when I switch to mobile, they stack and are only 1 per row. How can I show 2 or 3 product blocks per row on mobile?

For example, I am trying to do it on this page: https://www.jivamorelife.com/watercolor-splatters

 

Add to Design > Custom CSS

/* 2 products columns */
@media screen and (max-width:640px) {
div#page-5f489bc95b4e2969d5bf026c .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-5f489bc95b4e2969d5bf026c .span-3:nth-child(2n+1) {
    clear: left !important;
}
}

@tuanphan Thank you! That worked. I need to do this for other pages as well so where did the find the highlighted number below? Then I can add the additional code that I need.

On 5/3/2021 at 6:12 AM, Radhika22 said:

@tuanphan Thank you! That worked. I need to do this for other pages as well so where did the find the highlighted number below? Then I can add the additional code that I need.

 

Each page needs a different code. Difficult to explain. Can you share link to other pages? We will give the code

@tuanphan Yes, I need it for the following pages:

• https://www.jivamorelife.com/mini-paintings
• https://www.jivamorelife.com/polaroids

Is there a link that explains how to do it? because I'll need to do it for many more pages in the future.

On 5/5/2021 at 1:56 AM, Radhika22 said:

@tuanphan Yes, I need it for the following pages:

• https://www.jivamorelife.com/mini-paintings
• https://www.jivamorelife.com/polaroids

Is there a link that explains how to do it? because I'll need to do it for many more pages in the future.

I don't know how to explain this. Here the video how I do & code

Add to Design > Custom CSS

/* product 2 columns mobile */
@media screen and (max-width:640px) {
/* Mini paintings */
div#page-60246570a7841d194bd52219 .span-12 .row:nth-child(3) .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-60246570a7841d194bd52219 .span-12 .row:nth-child(3) .span-3:nth-child(2n+1) {
    clear: left;
}
/* polaroies */
div#page-607a494ab14a497e09cc5385 .span-12 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-607a494ab14a497e09cc5385 .span-12 .span-3:nth-child(2n+1) {
    clear: left;
}
}

Video: https://www.loom.com/share/d2dbef7f863843d7954dbb5ec65b5456?focus_title=1&muted=1&from_recorder=1

If you need help with other pages, just post url here. We will help

@tuanphan Thank you!! That worked great. Could you do the similar for this page? 

https://www.jivamorelife.com/collections

On 5/11/2021 at 4:12 AM, Radhika22 said:

@tuanphan Thank you!! That worked great. Could you do the similar for this page? 

https://www.jivamorelife.com/collections

Add to Design > Custom CSS

/* Collections page header */
@media screen and (max-width:640px) {
div#block-0af3a012f3c9b4da3f05+.row .span-3 {
    width: 50% !important;
    float: left !important;
}
div#block-0af3a012f3c9b4da3f05+.row .span-3:nth-child(2n+1) {
    clear: left !important;
}
}

@tuanphanThe code above worked for collections!! Thank you.

https://www.jivamorelife.com/mini-paintings

But for the following link, only half of the products are showing 2 per row on mobile. Do you know how to fix it?

https://www.jivamorelife.com/mini-paintings

I used this code that you sent below:

/* product 2 columns mobile */
@media screen and (max-width:640px) {
/* Mini paintings */
div#page-60246570a7841d194bd52219 .span-12 .row:nth-child(3) .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-60246570a7841d194bd52219 .span-12 .row:nth-child(3) .span-3:nth-child(2n+1) {
    clear: left;
}
/* polaroies */
div#page-607a494ab14a497e09cc5385 .span-12 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-607a494ab14a497e09cc5385 .span-12 .span-3:nth-child(2n+1) {
    clear: left;
}
}

Use this new code

/* product 2 columns mobile */
@media screen and (max-width:640px) {
/* Mini paintings */
div#page-60246570a7841d194bd52219 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-60246570a7841d194bd52219 .span-3:nth-child(2n+1) {
    clear: left;
}
/* polaroies */
div#page-607a494ab14a497e09cc5385 .span-12 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-607a494ab14a497e09cc5385 .span-12 .span-3:nth-child(2n+1) {
    clear: left;
}
}

21 hours ago, tuanphan said:

Use this new code

/* product 2 columns mobile */
@media screen and (max-width:640px) {
/* Mini paintings */
div#page-60246570a7841d194bd52219 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-60246570a7841d194bd52219 .span-3:nth-child(2n+1) {
    clear: left;
}
/* polaroies */
div#page-607a494ab14a497e09cc5385 .span-12 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-607a494ab14a497e09cc5385 .span-12 .span-3:nth-child(2n+1) {
    clear: left;
}
}

 

Thank you! It worked.

@tuanphan Is there custom code that would do the same thing for a banner section on a homepage (index) page for a mobile view? (The first section in the link below. Photo attached)

https://www.jivamorelife.com/

10 hours ago, Radhika22 said:

@tuanphan Is there custom code that would do the same thing for a banner section on a homepage (index) page for a mobile view? (The first section in the link below. Photo attached)

https://www.jivamorelife.com/

 

 

Add to Design > Custom CSS

/* Mobile-Banner side by side */
@media screen and (max-width:767px) {
div#page-60c94c80079fbe716535f7e8 .span-3 {
    width: 50% !important;
    float: left !important;
}
}

12 hours ago, tuanphan said:

/* Mobile-Banner side by side */ @media screen and (max-width:767px) { div#page-60c94c80079fbe716535f7e8 .span-3 { width: 50% !important; float: left !important; } }

Thank you!! Can I do the same thing for these 2 sections?

https://www.jivamorelife.com/

9 hours ago, Radhika22 said:

Thank you!! Can I do the same thing for these 2 sections?

https://www.jivamorelife.com/

Use this code

/* Mobile-Homepage-2 columns */
@media screen and (max-width:640px) {
section#products-1 .span-3, section#products-2 .span-3 {
    width: 50% !important;
    float: left !important;
}
section#products-1 .span-3:nth-child(2n+1), section#products-2 .span-3:nth-child(2n+1) {
    clear: left !important;
}
}

On 6/18/2021 at 12:11 AM, tuanphan said:

Use this code

/* Mobile-Homepage-2 columns */
@media screen and (max-width:640px) {
section#products-1 .span-3, section#products-2 .span-3 {
    width: 50% !important;
    float: left !important;
}
section#products-1 .span-3:nth-child(2n+1), section#products-2 .span-3:nth-child(2n+1) {
    clear: left !important;
}
}

 

@tuanphan Thank you! Can you do the same for this page? https://www.jivamorelife.com/candy-clouds-mini-paintings

For the collections page, the last item is showing up very large instead of the same size as the others in mobile view. How I fix this? https://www.jivamorelife.com/collections

4 hours ago, Radhika22 said:

@tuanphan Thank you! Can you do the same for this page? https://www.jivamorelife.com/candy-clouds-mini-paintings

For the collections page, the last item is showing up very large instead of the same size as the others in mobile view. How I fix this? https://www.jivamorelife.com/collections

Add this CSS

/* mobile products 2 items */
@media screen and (max-width:640px) {
div#page-60f5f9d54b723e0609c06f6c .span-3 {
    width: 50% !important;
    float: left !important;
}

div#page-60f5f9d54b723e0609c06f6c .span-3:nth-child(2n+1) {
    clear: left !important;
}
div#block-0af3a012f3c9b4da3f05 ~ .row .span-3 {
    width: 50% !important;
}
}

13 hours ago, tuanphan said:

Add this CSS

/* mobile products 2 items */
@media screen and (max-width:640px) {
div#page-60f5f9d54b723e0609c06f6c .span-3 {
    width: 50% !important;
    float: left !important;
}

div#page-60f5f9d54b723e0609c06f6c .span-3:nth-child(2n+1) {
    clear: left !important;
}
div#block-0af3a012f3c9b4da3f05 ~ .row .span-3 {
    width: 50% !important;
}
}

 

@tuanphan Thank you!!

On 7/23/2021 at 2:19 AM, tuanphan said:

Do you need to help with these?

Site URL – https://www.jivamorelife.com/

1. (Mobile – Quick view) Increase text width?

https://www.jivamorelife.com/

2. (Desktop – Blog posts) Reduce space?

https://www.jivamorelife.com/blog/grow-past-your-fears

3. (Mobile – Menu) Reduce space between Collections and Testimonials?

https://www.jivamorelife.com/

4. (Mobile – Collections) Align text?

https://www.jivamorelife.com/collections

5. (Tablet – Header) Menu is cut into 2 lines.

https://www.jivamorelife.com/

6. (Tablet – Shop) Scroll bar at the bottom of page.

https://www.jivamorelife.com/shop/pink-lemonade-dreams

@tuanphan Yes, those fixes would be really helpful!! How would you suggest I fix them?

On 8/4/2021 at 12:57 PM, Radhika22 said:

@tuanphan Yes, those fixes would be really helpful!! How would you suggest I fix them?

Q1. Try checking again
Q2. You can remove blank text block under button
Q3.  Add to Design > Custom CSS

/* Space between testimonials-collections */
a.Mobile-overlay-nav-item:last-child {
    padding-bottom: 0;
}
nav.Mobile-overlay-nav.Mobile-overlay-nav--secondary>a:first-child {
    padding-top: 10px;
}

On 8/5/2021 at 12:23 AM, tuanphan said:

/* Space between testimonials-collections */
a.Mobile-overlay-nav-item:last-child {
    padding-bottom: 0;
}
nav.Mobile-overlay-nav.Mobile-overlay-nav--secondary>a:first-child {
    padding-top: 10px;
}

@tuanphan Thank you!!

@tuanphan Can you help me show 2 products per row on mobile for the section highlighted below on the homepage? https://www.jivamorelife.com/

On 7/19/2021 at 9:18 PM, tuanphan said:

Add this CSS

/* mobile products 2 items */
@media screen and (max-width:640px) {
div#page-60f5f9d54b723e0609c06f6c .span-3 {
    width: 50% !important;
    float: left !important;
}

div#page-60f5f9d54b723e0609c06f6c .span-3:nth-child(2n+1) {
    clear: left !important;
}
div#block-0af3a012f3c9b4da3f05 ~ .row .span-3 {
    width: 50% !important;
}
}

 

19 hours ago, Radhika22 said:

@tuanphan Can you help me show 2 products per row on mobile for the section highlighted below on the homepage? https://www.jivamorelife.com/

 

 

Hi. Add to Design > Custom CSS

/* Mobile create your best life */
@media screen and (max-width:640px) {
section#learn-more-1 .span-12 .row .span-3 {
    width: 50% !important;
    float: left !important;
}
}

On 8/8/2021 at 12:26 AM, tuanphan said:

Hi. Add to Design > Custom CSS

/* Mobile create your best life */
@media screen and (max-width:640px) {
section#learn-more-1 .span-12 .row .span-3 {
    width: 50% !important;
    float: left !important;
}
}

 

@tuanphan Thank you!

Hi:) I have the exact same problem, and need 2 products to be displayed per row. 

Would love the custom CSS for these pages:

https://www.sarandjules.com/sarandjules-vintage

https://www.sarandjules.com/by-sarandjules

https://www.sarandjules.com/sarandjewels

https://www.sarandjules.com/postcards

https://www.sarandjules.com/posters

https://www.sarandjules.com/sarandjules-merch

Also! Is it possible to add a filtering option to show only available products? As we are a vintage store, we only have one of each product, so most of or products are sold out and you need to scroll a lot to find available products.