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 14
  • Created
  • Last Reply

Top Posters For This Question

14 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 post
  • 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 post
  • 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 post
  • 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 post
  • 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 post
  • 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 post
  • 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 post
  • 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 post
  • 0
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 post
  • 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 post

Create an account or sign in to comment

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


×
×
  • Create New...