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

2 column image stacking on mobile?


pashapasha1570048753

Question

So please bear with me as I'm a novice when it comes to CSS or any of this. I've been trying to google answers for the past few hours now to no avail. Essentially I'm just looking to have 1:1 images, with a title and a description, stacked in 2 columns on mobile.

A gallery grid does basically what I want on desktop and mobile - but doesn't show descriptions. A summary block does it too but stacks one image on top of another and when I have 60+ images, it becomes a huge scroll. I have not been able to find solutions to either of these issues so if you have a solution to either instead it'd be greatly appreciated.

So now, I've just succumbed to doing individual image stacks. I've found out how to shrink the image blocks just in mobile, however I still can't them to form rows/columns despite the extra room now they have on the right (as seen in the screenshot). The code I'm using is below.

Any insight would be greatly appreciated.

alt text

alt text

screen-shot-2019-09-03-at-10101-pm.jpg.2c83431198a2299f23e032072954cee5.jpg

screen-shot-2019-09-03-at-10603-pm.png.b5af66d6894ad61b5a001dc8d559f734.png

Edited by pashapasha
Initial Revision
Link to comment

Recommended Posts

  • 0
1 hour ago, meljthompson said:

Hi @tuanphan I'm having a similar issue and wondered if you could help. Tried all the codes in this thread but nothing seems to be working.

I have a row of 4 logos at the bottom of my home page that I would like displayed as 2 columns on mobile: www.mieloandco.com 

Any insight would be appreciated!!

You can't do this with your layout, you need to rearrange the columns a bit, which is difficult to explain.
Another solution is to use Summary Block or Gallery, then I 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 8/12/2020 at 9:27 AM, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (max-width:767px) {
div#page-section-5f304a27476fd6536aa57bbf .span-4 {
    width: 33.33% !important;
    float: left !important;
}
}

 

Hi Tuanphan,

I tried some tweaking of the code you provided in this thread but no luck. I am hoping you could assist yet again! I am trying to have the three (3) side-by-side podcast buttons not stack on mobile.

http://www.takebackyourcareerpodcast.com

password: boots135

133120393_ScreenShot2020-11-04at1_22_36PM.thumb.png.8a8b04ad0678bc19a44b6685e09de91b.png

Thank you!

Link to comment
  • 0
On 11/5/2020 at 1:24 AM, gogreenmsu said:

Hi Tuanphan,

I tried some tweaking of the code you provided in this thread but no luck. I am hoping you could assist yet again! I am trying to have the three (3) side-by-side podcast buttons not stack on mobile.

http://www.takebackyourcareerpodcast.com

password: boots135

Thank you!

Use this new code

@media screen and (max-width:767px) {
div#page-section-5fa4b44a989a223ad30acbe7 .span-12 .span-4 {
    width: 33.33% !important;
    float: left !important;
}
div#page-section-5fa4b44a989a223ad30acbe7 .span-12 .span-4 .image-block {
    padding: 5px;
}
}

 

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
2 hours ago, tuanphan said:

Use this new code


@media screen and (max-width:767px) {
div#page-section-5fa4b44a989a223ad30acbe7 .span-12 .span-4 {
    width: 33.33% !important;
    float: left !important;
}
div#page-section-5fa4b44a989a223ad30acbe7 .span-12 .span-4 .image-block {
    padding: 5px;
}
}

 

Worked perfectly; thank you very much!

Link to comment
  • 0
12 hours ago, anothername said:

I was super excited when I found this thread as I'm trying to do the same thing. Does this code work with 7.1 sites? I've tried every suggestion on the thread to no avail 😞

I'd be hugely grateful for any advice. 

Each page needs different code. Can you share link to page where you use image? We can help easier

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

Hi, I wonder can anyone help.  I am also having trouble formatting a page for mobile.  I have created an edit of products from my site using product blocks, but these stack one on top of the other on mobile, which is difficult to view for so many items.  Any suggestions how I could make these appear in 2 or 3 columns instead?  Furthermore, the button links I have created stack on top too, I would prefer if they arranged beside each other.  Is this possible?  Many thanks for your help!

URL: www.unarodden.com/the-gift-edit-1

Link to comment
  • 0
On 11/16/2020 at 7:45 PM, katie_w_3 said:

Hi, I wonder can anyone help.  I am also having trouble formatting a page for mobile.  I have created an edit of products from my site using product blocks, but these stack one on top of the other on mobile, which is difficult to view for so many items.  Any suggestions how I could make these appear in 2 or 3 columns instead?  Furthermore, the button links I have created stack on top too, I would prefer if they arranged beside each other.  Is this possible?  Many thanks for your help!

URL: www.unarodden.com/the-gift-edit-1

You mean Browse by Value & Browse by Personality? Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1605449828234_428558+.row {
    display: flex;
}
div#block-yui_3_17_2_1_1605449828234_428558+.row * {
    font-size: 11px;
}
}

 

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
20 minutes ago, tuanphan said:

You mean Browse by Value & Browse by Personality? Add to Home > Design > Custom CSS


@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1605449828234_428558+.row {
    display: flex;
}
div#block-yui_3_17_2_1_1605449828234_428558+.row * {
    font-size: 11px;
}
}

 

Thank you so much @tuanphan.  I would also like my images to appear in columns as they do on my other store pages for mobile.  Maybe this will work for that too?  Really appreciate your help!

Link to comment
  • 0

Add to Home > Design > Custom CSS

/* mobile 2 products row */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1605434151889_26849+.row>.span-4 {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
}
div#block-yui_3_17_2_1_1605434151889_26849+.row>.span-4 .product-block {
    padding: 5px !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
4 hours ago, tuanphan said:

Add to Home > Design > Custom CSS


/* mobile 2 products row */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1605434151889_26849+.row>.span-4 {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
}
div#block-yui_3_17_2_1_1605434151889_26849+.row>.span-4 .product-block {
    padding: 5px !important;
}
}

 

This is amazing @tuanphan!  Thank you so much.  The "Browse by Value" section has appeared perfectly, however, the "Browse by Personality" remains the same.  Also, with regards the image sections, £0-60 shows the images as a perfect size, but displays them by column as opposed to left to right, and then all other sections appear as before.  I fear this may be because of the way I have added sections?  I have added some screenshots for explanation

Screenshot_2020-11-17 General 2 — Una Rodden.png

Screenshot_2020-11-17 General 2 — Una Rodden(1).png

Screenshot_2020-11-17 General 2 — Una Rodden(2).png

Link to comment
  • 0
On 11/14/2020 at 7:50 AM, tuanphan said:

Each page needs different code. Can you share link to page where you use image? We can help easier

Thanks so much for getting back to me. I actually found a setting in the summary block that let me adjust the settings for mobile and tablet individually which allowed me to achieve it that way. 

I'm not sure if I missed it earlier, or if it's a feature of the lazy summaries plug in that I installed, but I thought I'd mention it in case it helped someone else. 

Link to comment
  • 0
On 11/17/2020 at 5:54 PM, katie_w_3 said:

This is amazing @tuanphan!  Thank you so much.  The "Browse by Value" section has appeared perfectly, however, the "Browse by Personality" remains the same.  Also, with regards the image sections, £0-60 shows the images as a perfect size, but displays them by column as opposed to left to right, and then all other sections appear as before.  I fear this may be because of the way I have added sections?  I have added some screenshots for explanation

Screenshot_2020-11-17 General 2 — Una Rodden.png

Screenshot_2020-11-17 General 2 — Una Rodden(1).png

Screenshot_2020-11-17 General 2 — Una Rodden(2).png

Okay, so I've worked out how to get all products appearing as in the £0-60 category and I've the "Browse by Personality" buttons appearing in a row.  However, you now need to scroll the screen to the left to view the 4th button.  Is there a way to lay this section out as 2 rows of 2 buttons so all are visible?  Also, still wondering how my products can be read from the desktop rows as opposed to columns, as this will make more sense?  Apologies, I am completely new to coding, any suggestions will be gratefully received!  I have added screenshots to explain.  Many thanks!

Screenshot_2020-11-22 The Gift Edit — Una Rodden.png

Screenshot_2020-11-22 The Gift Edit — Una Rodden(1).png

Screenshot_2020-11-22 The Gift Edit — Una Rodden(2).png

Link to comment
  • 0
On 9/3/2019 at 1:08 PM, pashapasha1570048753 said:

So please bear with me as I'm a novice when it comes to CSS or any of this. I've been trying to google answers for the past few hours now to no avail. Essentially I'm just looking to have 1:1 images, with a title and a description, stacked in 2 columns on mobile.

A gallery grid does basically what I want on desktop and mobile - but doesn't show descriptions. A summary block does it too but stacks one image on top of another and when I have 60+ images, it becomes a huge scroll. I have not been able to find solutions to either of these issues so if you have a solution to either instead it'd be greatly appreciated.

So now, I've just succumbed to doing individual image stacks. I've found out how to shrink the image blocks just in mobile, however I still can't them to form rows/columns despite the extra room now they have on the right (as seen in the screenshot). The code I'm using is below.

Any insight would be greatly appreciated.

/storage/temp/15189-screen-shot-2019-09-03-at-10603-pm.png

/storage/temp/15188-screen-shot-2019-09-03-at-10101-pm.jpg

screen-shot-2019-09-03-at-10101-pm.jpg.2c83431198a2299f23e032072954cee5.jpg

screen-shot-2019-09-03-at-10603-pm.png.b5af66d6894ad61b5a001dc8d559f734.png

 

On 6/3/2020 at 8:22 PM, tuanphan said:

Can you share link to page in screenshot?

Hi,

I am looking for some assistance. Having issues getting side by side image blocks on the mobile view on home page and product page, understand its a matter of of a css code and there are some similarities in responses but all look unique to page. How do I find this formula? 

Best,

Raymond

Link to comment
  • 0

Hi All,

I am looking for some assistance. Having issues getting side by side image blocks on the mobile view on home page and product page, understand its a matter of of a css code and there are some similarities in responses but all look unique to page. How do I find this formula? 

Best,

Raymond

Link to comment
  • 0
On 11/26/2020 at 12:00 PM, rmcspirit said:

Hi All,

I am looking for some assistance. Having issues getting side by side image blocks on the mobile view on home page and product page, understand its a matter of of a css code and there are some similarities in responses but all look unique to page. How do I find this formula? 

Best,

Raymond

 

On 11/26/2020 at 11:59 AM, rmcspirit said:

 

Hi,

I am looking for some assistance. Having issues getting side by side image blocks on the mobile view on home page and product page, understand its a matter of of a css code and there are some similarities in responses but all look unique to page. How do I find this formula? 

Best,

Raymond

 

On 11/22/2020 at 11:34 PM, katie_w_3 said:

Okay, so I've worked out how to get all products appearing as in the £0-60 category and I've the "Browse by Personality" buttons appearing in a row.  However, you now need to scroll the screen to the left to view the 4th button.  Is there a way to lay this section out as 2 rows of 2 buttons so all are visible?  Also, still wondering how my products can be read from the desktop rows as opposed to columns, as this will make more sense?  Apologies, I am completely new to coding, any suggestions will be gratefully received!  I have added screenshots to explain.  Many thanks!

Screenshot_2020-11-22 The Gift Edit — Una Rodden.png

Screenshot_2020-11-22 The Gift Edit — Una Rodden(1).png

Screenshot_2020-11-22 The Gift Edit — Una Rodden(2).png

Hi. Do you still need help on this?

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

Hi there. Please would someone be able to help me get these 2 buttons side-by-side instead of stacked for mobile. I've tried some CSS on the forum but can't get it to work out.

https://cowbell-duck-xfmb.squarespace.com/insempo

password: Yarni1

 

Thank you

Link to comment
  • 0
On 1/25/2021 at 9:51 AM, feltromedia said:

Hi there. Please would someone be able to help me get these 2 buttons side-by-side instead of stacked for mobile. I've tried some CSS on the forum but can't get it to work out.

https://cowbell-duck-xfmb.squarespace.com/insempo

password: Yarni1

 

Thank you

It looks like you solved with this CSS

@media screen and (max-width: 767px) {
    div#block-fadad24a93adc073892b+.row>.span-6 {
        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 11/16/2020 at 5:45 AM, katie_w_3 said:

Hi, I wonder can anyone help.  I am also having trouble formatting a page for mobile.  I have created an edit of products from my site using product blocks, but these stack one on top of the other on mobile, which is difficult to view for so many items.  Any suggestions how I could make these appear in 2 or 3 columns instead?  Furthermore, the button links I have created stack on top too, I would prefer if they arranged beside each other.  Is this possible?  Many thanks for your help!

URL: www.unarodden.com/the-gift-edit-1

The url doesn't exist. Can you check again?

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

Create an account or sign in to comment

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

×
×
  • Create New...