Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

2 or 3 product blocks per row for mobile


Radhika22

Question

  • Answers 18
  • Created
  • Last Reply

Top Posters For This Question

18 answers to this question

Recommended Posts

  • 0
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;
}
}

 

Link to comment
  • 0
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.

 

image.thumb.png.378b851098cefad8644841329561ede9.png

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

 

Link to comment
  • 0
On 5/5/2021 at 1:56 AM, Radhika22 said:

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

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

Link to comment
  • 0
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;
}
}

 

Link to comment
  • 0

@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;
}
}
Link to comment
  • 0

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;
}
}

 

Link to comment
  • 0
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.

Link to comment
  • 0
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/

image.thumb.png.95b6b1f6ecfe64fb5b3f2d4c6060d00b.png

 

 

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;
}
}

 

Link to comment
  • 0
Posted (edited)
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/

image.thumb.png.a9ab17acf970000c46f5b8a8dff35ef1.pngimage.thumb.png.fcc3af45dbc9403970c1e9bfc1ba8040.png

Edited by Radhika22
Additional details
Link to comment
  • 0
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;
}
}

 

Link to comment
  • 0
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

Link to comment
  • 0
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;
}
}

 

Link to comment
  • 0
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!!

Link to comment
  • 0
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

 

Do you need to help with these?

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

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

https://www.jivamorelife.com/

jivamorelife.com-01-min.png

2. (Desktop – Blog posts) Reduce space?

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

jivamorelife.com-02-min.png

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

https://www.jivamorelife.com/

jivamorelife.com-03-min.png

4. (Mobile – Collections) Align text?

https://www.jivamorelife.com/collections

jivamorelife.com-04-min.png

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

https://www.jivamorelife.com/

jivamorelife.com-05-min.png

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

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

jivamorelife.com-06-min.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...