2 column image stacking on mobile?

21 hours ago, Trishyeah said:

@tuanphan I'm soo hoping you can help with this!

Oh my goshhh!! This was the only code from my 2 hours or searching and trialling that made any change to anything I was doing. BUT it's all so wonky.

It's not centered/balanced, and the first image at the start of each row is larger than the rest. Hope you can help! Eeeee I finally feel like I'm getting close. 

It's still in a test site so I don't have a URL for you sorry.

This is the code I'm using

 

@media only screen and (max-width: 640px)
  {.gallery-grid-wrapper {
      width: 33.33% !important;
      clear: none !important;
   
  }
  }
@media only screen and (max-width: 640px) { 

.gallery-grid-wrapper{ grid-template-columns: repeat(3, auto)!important;}

}

Can you share link to page in screenshot?

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?

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

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

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 I also need help with the same problem, my website is burbleapp.com, please help me

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?

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

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

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

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?

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

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?

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 😞

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

On 7/24/2020 at 11:03 AM, tuanphan said:

Have you solved it yet?

Yes thanks sososososo much!

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? 

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

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

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

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!

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

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

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?

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?