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
1 minute ago, tuanphan said:

Can you share link to page in screenshot?

Sadly I can't as it's not live and not sure how to share it as when I look at the link in mobile it's private I'm guessing because it's unpublished?

Link to post
  • 0
1 hour ago, Trishyeah said:

Sadly I can't as it's not live and not sure how to share it as when I look at the link in mobile it's private I'm guessing because it's unpublished?

You can setup password & share url

Link to post
  • 0
On 6/3/2020 at 7:20 PM, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (max-width:767px) {
div#page-5ecd994795a4d74aea940bfe>.row>.span-4 {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
}
div#page-5ecd994795a4d74aea940bfe>.row>.span-4 .image-block-wrapper {
    padding-bottom: 100% !important;
}
}

 

Thanks!! @tuanphan

Is there a way to leave the pictures with different heights as it looks on desktop browser?

Greetings

Link to post
  • 0
On 6/10/2020 at 10:19 PM, aricraven said:

Hi @tuanphan -- I am looking to make a gallery show 2 columns on mobile only. Curious if you're able to assist, thank you! 

Specifically looking at the "Our Ensemble" section of https://www.definitiontheatre.org/our-team.  

Hi. Sorry for the delay. Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1573587850314_9422 {
.summary-item {
    width: 49.5% !important;
    float: left !important;
	clear: none !important;
}
.summary-item:nth-child(2n+1) {
    margin-right: 1% !important;
    clear: left !important;
}
.summary-item img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
}
}

 

17 hours ago, hf4444 said:

hi I also need help with the same problem, my website is burbleapp.com, please help me

Which page?

Link to post
  • 0
22 hours ago, hf4444 said:

@tuanphan the home page, when I open in mobile the ios and android pictures are stacked up

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#block-172cba5fc54183694283+.row>.col {
    width: 49.5% !important;
    float: left !important;
}
}

 

Link to post
  • 0
On 7/22/2020 at 8:38 PM, owenfriend said:

Hi @tuanphan, you recently helped me with my site https://pike-helicon-sgrw.squarespace.com/, I'm having the same issue with two buttons in the footer, any chance you can help with this?

Add to Home > Design > Custom CSS

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

 

Link to post
  • 0
On 7/6/2020 at 7:00 AM, sashaadato said:

@tuanphan hello! could you help me as well ? I have created a question post 

 

Have you solved it yet?

Link to post
  • 0
On 7/29/2020 at 6:13 AM, samrivera said:

Hello,

I'm a having a similar issue with the site I'm creating https://pilotwaveholdings.squarespace.com  pw: evergreen

I have a section on the main page with some logos. I would like to have two logos per row when displayed on mobile.

Any help will be greatly appreciated 😞

You mean logos on Brand Network section? Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
/* brand networkd 2 logos */
div#page-section-5f2082bcf8c6483c9e8ca309>.row:nth-child(2) .span-7 {
.span-3>div, .span-4>.row>.span-2>div {
    width: 50% !important;
    float: left !important;
    clear: none !important;
    padding-left: 0;
    padding-right: 0;
}
 .span-3>div:nth-child(2n+1), .span-4>.row>.span-2>div:nth-child(2n+1) {
    clear: left !important;
}
}
}

 

Link to post
  • 0
18 hours ago, tuanphan said:

You mean logos on Brand Network section? Add to Home > Design > Custom CSS


@media screen and (max-width:767px) {
/* brand networkd 2 logos */
div#page-section-5f2082bcf8c6483c9e8ca309>.row:nth-child(2) .span-7 {
.span-3>div, .span-4>.row>.span-2>div {
    width: 50% !important;
    float: left !important;
    clear: none !important;
    padding-left: 0;
    padding-right: 0;
}
 .span-3>div:nth-child(2n+1), .span-4>.row>.span-2>div:nth-child(2n+1) {
    clear: left !important;
}
}
}

This works amazing for the first three columns but leaves the last two columns out and displayed one per row. Is there anything else I can add? 

 

Link to post
  • 0
4 hours ago, samrivera said:

 

new code

@media screen and (max-width:767px) {
/* brand networkd 2 logos */
div#page-section-5f2082bcf8c6483c9e8ca309>.row:nth-child(2) {
.span-7 .span-3>div, .span-7 .span-4>.row>.span-2>div, .span-3>div, .span-2>div {
    width: 50% !important;
    float: left !important;
    clear: none !important;
    padding-left: 0;
    padding-right: 0;
}
 .span-7 .span-3>div:nth-child(2n+1), .span-7 .span-4>.row>.span-2>div:nth-child(2n+1), .span-3>div:nth-child(2n+1), .span-2>div:nth-child(2n+1) {
    clear: left !important;
}
}
}

 

Link to post
  • 0
6 hours ago, tuanphan said:

new code


@media screen and (max-width:767px) {
/* brand networkd 2 logos */
div#page-section-5f2082bcf8c6483c9e8ca309>.row:nth-child(2) {
.span-7 .span-3>div, .span-7 .span-4>.row>.span-2>div, .span-3>div, .span-2>div {
    width: 50% !important;
    float: left !important;
    clear: none !important;
    padding-left: 0;
    padding-right: 0;
}
 .span-7 .span-3>div:nth-child(2n+1), .span-7 .span-4>.row>.span-2>div:nth-child(2n+1), .span-3>div:nth-child(2n+1), .span-2>div:nth-child(2n+1) {
    clear: left !important;
}
}
}

 

This work perfectly. Thank you so much!!

Link to post
  • 0

Hi I am having similar issues. 

I have 4 poster blocks on my homepage which on tablet view I would like to display 2 per row so that they remain square.

I have tried the following code but it does not work. 

 

@media screen and (min-width:768px) and (max-width:991px) {
div#block-yui_3_17_2_1_1595032695355_19528 .span-12>.row>.col {
    width: 50% !important;
    float: left !important;
}
  div#block-yui_3_17_2_1_1595032695355_17174 .span-12>.row>.col {
    width: 50% !important;
    float: left !important;
}

  @media screen and (min-width:768px) and (max-width:991px) {
div##block-yui_3_17_2_1_1595032695355_20556 .span-12>.row>.col {
    width: 50% !important;
    float: left !important;
}
  div#block-yui_3_17_2_1_1595884548965_230854 .span-12>.row>.col {
    width: 50% !important;
    float: left !important;
}  

}



Anyone able to assist please? 

Thank you

site: www.cocosatelier.co.uk
pass: caview23

Link to post
  • 0
13 hours ago, serenamnixon said:

Hey @tuanphan

Would you be able to help me with a code for the image blocks under my hero section? I really want the "about me", "presets", and "contact me" images to be all in one row and reduced to 33.3% size instead of stacked. 

site: https://sparrow-plums-s25x.squarespace.com/

password: summer2020
 

Thank you!

Add to Home > Design > Custom CSS

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

 

Link to post
  • 0
6 hours ago, tuanphan said:

Add to Home > Design > Custom CSS


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

 

Amazing thank you so much!

Follow up question--I want to do the same on the blog home page. I tried copying the code and switching out the section id, but it didn't work. Would you be able to help me with that? I want to put the fitness, food, and lifestyle image blocks in one row. 

Thanks again!! 

Link to post
  • 0
18 hours ago, serenamnixon said:

Amazing thank you so much!

Follow up question--I want to do the same on the blog home page. I tried copying the code and switching out the section id, but it didn't work. Would you be able to help me with that? I want to put the fitness, food, and lifestyle image blocks in one row. 

Thanks again!! 

Which blog? Can you take a screenshot?

Link to post
  • 0
1 hour ago, tuanphan said:

Which blog? Can you take a screenshot?

Yep--https://sparrow-plums-s25x.squarespace.com/blog-posts

I have these links on the main blog home page (recent) and then clicking on each image block filters posts under that category, so I want to make sure that in mobile view the three image blocks are in one row on both the main blog page and the filtered blog pages. Does that make sense? 

Screen Shot 2020-08-10 at 8.51.48 AM.png

Link to post
  • 0
On 8/10/2020 at 10:54 PM, serenamnixon said:

Yep--https://sparrow-plums-s25x.squarespace.com/blog-posts

I have these links on the main blog home page (recent) and then clicking on each image block filters posts under that category, so I want to make sure that in mobile view the three image blocks are in one row on both the main blog page and the filtered blog pages. Does that make sense? 

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

 

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