2 column image stacking on mobile?

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

On 2/15/2021 at 3:33 PM, katie_w_3 said:

Hi @tuanphan, apologies, the url is https://www.unarodden.com/the-gift-edit

I have the columns working now but is there anyway to have the images read left to right from my desktop site, as opposed to vertically?  It really scrambles the order.  Thanks so much!

Missing your comment :( Do you still need help?

On 3/26/2021 at 2:56 PM, shannamc said:

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

Add to Design > Custom CSS

/* sign up images side by side */
@media screen and (max-width:767px) {
div#page-section-605d894750862c5f0f7f7167, div#page-section-605d894750862c5f0f7f7167 { .span-12>.row:first-child>.span-3 {
    width: 50% !important;
    float: left !important;
}
}
}

5 hours ago, tuanphan said:

Add to Design > Custom CSS

/* sign up images side by side */
@media screen and (max-width:767px) {
div#page-section-605d894750862c5f0f7f7167, div#page-section-605d894750862c5f0f7f7167 { .span-12>.row:first-child>.span-3 {
    width: 50% !important;
    float: left !important;
}
}
}

Hi @tuanphan

Thank you so much for taking the time to reply! This has worked for the left hand 2 column section of the desktop images, but not for the right hand 2 columns, they are displaying as one column on mobile. 

Is there a fix for this? 

On 3/30/2021 at 3:05 AM, shannamc said:

Hi @tuanphan

Thank you so much for taking the time to reply! This has worked for the left hand 2 column section of the desktop images, but not for the right hand 2 columns, they are displaying as one column on mobile. 

Is there a fix for this? 

 

Add new code

/* sign up images side by side */
@media screen and (max-width:767px) {
div#page-section-605d894750862c5f0f7f7167, div#page-section-605d894750862c5f0f7f7167 { .span-12>.row:first-child>.span-3 {
    width: 50% !important;
    float: left !important;
}
}
div#page-section-605d894750862c5f0f7f7167 .span-12 .span-6 .span-3 {
    width: 50% !important;
    float: left !important;
}
}

On 3/31/2021 at 7:50 PM, tuanphan said:

Add new code

/* sign up images side by side */
@media screen and (max-width:767px) {
div#page-section-605d894750862c5f0f7f7167, div#page-section-605d894750862c5f0f7f7167 { .span-12>.row:first-child>.span-3 {
    width: 50% !important;
    float: left !important;
}
}
div#page-section-605d894750862c5f0f7f7167 .span-12 .span-6 .span-3 {
    width: 50% !important;
    float: left !important;
}
}

 

That has worked, thank you so much!

@tuanphan I'm trying to do similar with the icons toward the bottom of my page! The icons (4 across) all just stack. Ideally id love if it stayed 4 across but I could make do with 2 x 2.

https://culitrade.squarespace.com/about-culitrade

Password is JESSI

On 4/6/2021 at 7:27 PM, ThisWayToFabulous said:

@tuanphan I'm trying to do similar with the icons toward the bottom of my page! The icons (4 across) all just stack. Ideally id love if it stayed 4 across but I could make do with 2 x 2.

https://culitrade.squarespace.com/about-culitrade

 

Password is JESSI

Hi. Add to Design > Custom CSS

/* Icons side by side */
@media screen and (max-width:767px) {
div#page-section-6064e1a45a6eba7d94e16010 .span-12>.row .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-6064e1a45a6eba7d94e16010 .span-12>.row .span-3:nth-child(2n+1) {
    clear: left !important;
}
}

On 4/6/2021 at 7:27 PM, ThisWayToFabulous said:

@tuanphan I'm trying to do similar with the icons toward the bottom of my page! The icons (4 across) all just stack. Ideally id love if it stayed 4 across but I could make do with 2 x 2.

https://culitrade.squarespace.com/about-culitrade

 

Password is JESSI

Also, I see the site has problems

Site URL: https://culitrade.squarespace.com/

1. (Mobile-Header) Logo disappear

2. (Tablet-About) Icons don’t look good.

3. (Overlay Menu) No items. Want to remove overlay?

On 2/15/2021 at 8:33 AM, katie_w_3 said:

Hi @tuanphan, apologies, the url is https://www.unarodden.com/the-gift-edit

I have the columns working now but is there anyway to have the images read left to right from my desktop site, as opposed to vertically?  It really scrambles the order.  Thanks so much!

yes please @tuanphan, I would still love some help if possible!  Many thanks

2 hours ago, katie_w_3 said:

yes please @tuanphan, I would still love some help if possible!  Many thanks

Q1. It looks like you solved? However mobile menu has no item. Do you want to remove burger icon?

Q2. Add to Design > Custom CSS

/* About page - tablet - icons */
@media screen and (max-width:991px) and (min-width:768px) {
[data-section-id="6064e1a45a6eba7d94e16010"] .content {
    width: 90% !important;
}
}

Q3. Add to Design > Custom CSS

/* remove burger */
.burger-box {
    visibility: hidden;
}

Hi @tuanphan

I have a problem with the code you gave for the two colomns on mobile.

Here is the version on desktop :

And for the mobile version, as it takes the colomns, the last image with the heart is on the bottom alone. I woulk like it at the right of the image of the plate and fork. See in green below :

Here is the code I used :

//Colone mobile - Image Entreprise//
@media screen and (max-width:767px) {
div#page-section-607021392d09fc7af89b174d>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;  
}
div#page-section-607021392d09fc7af89b174d .image-block {
    padding: 5px;
}
div#page-section-607021392d09fc7af89b174d .image-block * {
    margin-bottom: 2px;
}}

Here is the website : https://chimes-poodle-kggl.squarespace.com/carte-entreprise

Pass : Advantage-Club

Thank you so much for your help @tuanphan !

On 5/20/2021 at 8:15 PM, Esoes_design said:

Hi @tuanphan

I have a problem with the code you gave for the two colomns on mobile.

Here is the version on desktop :

 

And for the mobile version, as it takes the colomns, the last image with the heart is on the bottom alone. I woulk like it at the right of the image of the plate and fork. See in green below :

Here is the code I used :

//Colone mobile - Image Entreprise//
@media screen and (max-width:767px) {
div#page-section-607021392d09fc7af89b174d>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;  
}
div#page-section-607021392d09fc7af89b174d .image-block {
    padding: 5px;
}
div#page-section-607021392d09fc7af89b174d .image-block * {
    margin-bottom: 2px;
}}

Here is the website : https://chimes-poodle-kggl.squarespace.com/carte-entreprise

Pass : Advantage-Club

 

Thank you so much for your help @tuanphan !

 

 

try this new code

@media screen and (max-width:767px) {
div#page-section-607021392d09fc7af89b174d>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;  
}
div#page-section-607021392d09fc7af89b174d>.row>.col>.row>.col:nth-child(2n+1) {
    clear: left !important;  
}
div#page-section-607021392d09fc7af89b174d .image-block {
    padding: 5px;
}
div#page-section-607021392d09fc7af89b174d .image-block * {
    margin-bottom: 2px;
}}

@tuanphan 

Thanks for the code for the two columns, however, it only works on my upper row. The rest is still divided. See screenshot. 

I am now using the code below, and if I remove  +1 ,next to 2n , then I get those upper two next to each other. But I would like to have all of them two by two. 

On 5/21/2021 at 4:40 PM, tuanphan said:

try this new code

@media screen and (max-width:767px) {
div#page-section-607021392d09fc7af89b174d>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;  
}
div#page-section-607021392d09fc7af89b174d>.row>.col>.row>.col:nth-child(2n+1) {
    clear: left !important;  
}
div#page-section-607021392d09fc7af89b174d .image-block {
    padding: 5px;
}
div#page-section-607021392d09fc7af89b174d .image-block * {
    margin-bottom: 2px;
}}

 

Thanks but this code is still not working ...

13 hours ago, Esoes_design said:

Thanks but this code is still not working ...

Did you edit something after post this question?

If you change, reorder anyblocks, the code won't work.

When you done design, let me know. We will check again.

14 hours ago, Ingrid89 said:

@tuanphan 

 

Thanks for the code for the two columns, however, it only works on my upper row. The rest is still divided. See screenshot. 

Can you share link to page in screenshot? We will check it again

@tuanphan sure! https://www.guimauve.nl/bracelets (this is the link, password = ingrid). 

The way I have it right now is with this code below. In mobile view, the upper row is two by two, the rest is still stacked. I would love all my products two by two. 

@media screen and (max-width:760px) {

div#page-section-60acb063f2c8f00460869887>.row>.col>.row>.col> {

    width: 50% !important;

    float: left !important;

}

}

9 minutes ago, Ingrid89 said:

@tuanphan sure! https://www.guimauve.nl/bracelets (this is the link, password = ingrid). 

The way I have it right now is with this code below. In mobile view, the upper row is two by two, the rest is still stacked. I would love all my products two by two. 

@media screen and (max-width:760px) {

div#page-section-60acb063f2c8f00460869887>.row>.col>.row>.col> {

    width: 50% !important;

    float: left !important;

}

}

 

Dont remove any code in your current code

Add this to Design > Custom CSS

/* mobile 2 columns */
@media screen and (max-width:767px) {
div#page-section-60acb063f2c8f00460869887 .span-12>.row:nth-child(2)>.span-9 {
    width: 100% !important;
}
div#page-section-60acb063f2c8f00460869887 .span-9 .span-6 .span-3 {
    width: 50% !important;
    float: left !important;
}
}

You solved my problem @tuanphan, thank you!!!

This is so awesome! @tuanphan I would so appriecate your help here! I've been trying to figure this our for the life of me! let's say I wanted a Summary Block to consist of 2 rows of 2 photos on mobile, and still have the ability to use the arrow to scroll to see more images.

So it will basically display 4 images at a time on Mobile.

I found a code that allows my Summary block to stack in two columns and show all images on mobile, but it'd like it to stack two columns and show only 4 images at a time, with the option to scroll through to see the next set of 4 images. So scrolling by 4 at a time.

Code I am using found at: https://www.rebeccagracedesigns.com/blog/summary-two-columns-mobile

SEE IMAGE ATTACHED FOR EXMAMPLE

@media only screen and (max-width: 640px) {
.summary-item-list {
display: flex;
flex-wrap: wrap;
}
.summary-item {
width: 45% !important;
margin: 4vw 2vw !important;
}
}

On 6/26/2021 at 7:20 AM, Nondys said:

This is so awesome! @tuanphan I would so appriecate your help here! I've been trying to figure this our for the life of me! let's say I wanted a Summary Block to consist of 2 rows of 2 photos on mobile, and still have the ability to use the arrow to scroll to see more images.

So it will basically display 4 images at a time on Mobile.

I found a code that allows my Summary block to stack in two columns and show all images on mobile, but it'd like it to stack two columns and show only 4 images at a time, with the option to scroll through to see the next set of 4 images. So scrolling by 4 at a time.

 

Code I am using found at: https://www.rebeccagracedesigns.com/blog/summary-two-columns-mobile

SEE IMAGE ATTACHED FOR EXMAMPLE

@media only screen and (max-width: 640px) {
.summary-item-list {
display: flex;
flex-wrap: wrap;
}
.summary-item {
width: 45% !important;
margin: 4vw 2vw !important;
}
}

Did you solve?

I feel bad asking, as so many others already have. But despite trying pretty much all of the code that you've provided in this thread, I'm not seeing any change on the mobile version - still just single stacked images on mobile. I'm not sure if it's different for me because I'm not dealing with a gallery, but actually 6 separate images (that I'm using as buttons that link to a filtered directory). Hoping to adjust to 2 or 3 wide instead of just single wide when viewed on mobile.

site https://cuboid-sailfish-6hlk.squarespace.com/ password OVBIZ

So grateful if you have a fix suggestion. Thank you 🙂

On 2/14/2022 at 6:09 AM, MoiToi said:

I feel bad asking, as so many others already have. But despite trying pretty much all of the code that you've provided in this thread, I'm not seeing any change on the mobile version - still just single stacked images on mobile. I'm not sure if it's different for me because I'm not dealing with a gallery, but actually 6 separate images (that I'm using as buttons that link to a filtered directory). Hoping to adjust to 2 or 3 wide instead of just single wide when viewed on mobile.

site https://cuboid-sailfish-6hlk.squarespace.com/ password OVBIZ

So grateful if you have a fix suggestion. Thank you 🙂

Hi. Where are images? I don't see on homepage

Hi, I have tried all the code but I am not able to create 2 columns in my mobile website: https://www.tru-lab.com/ . We would like that it works in all the home page (shop collections section but also all the products sections (Verrine and Spreads) and icons section). Can you help us? Thank you very much.