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 post
  • Answers 84
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Your site is private. Can you setup password & share url again?

Add to Home > Design > Custom CSS @media screen and (max-width:767px) { div#block-5e9840e42d95cc671880ffd3+.row .span-2 { width: 50% !important; float: left !important; } }  

Have you solved it yet?

Posted Images

Recommended Posts

  • 0
2 hours ago, 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;
}
}

 

Thank you soooooo much!

Link to post
  • 0

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

Link to post
  • 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

 

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

 

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

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. 

Link to post
  • 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

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

 

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

 

Link to post
  • 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 post
  • 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 post
  • 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 post
  • 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 post
  • 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 post
  • 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?

Link to post
  • 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 post
  • 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
    }
}

 

Link to post
  • 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?

Link to post
  • 0

@tuanphanHi! Would you please be able to help me get these square images to be in 2 columns on mobile? 

URL: https://hexaflexagon-terrier-4kwy.squarespace.com/sign-up

PW: quickfit2021

Thank you so much!

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