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

Top Posters For This Question

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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 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/

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

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

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Link to comment
  • 0

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

 


image.thumb.png.de3ad23679e3ff7c174f1d82dfb32ccd.png

 

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

 


image.thumb.png.de3ad23679e3ff7c174f1d82dfb32ccd.png

 

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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...