Images side by side on mobile

Site URL: https://endive-denim-89ds.squarespace.com/resorts

pw: 1404-Hello

Hi community,

I have made a wall of images on my page that looks great on desktop, but feels way too long on mobile. I would like to display two images per row (kind of like an instagram page) for mobile screens only. I have tried with the code below that targets the section only, but it doesn't put the images side by side...

Any help is appreciated. Thank you !

@media screen and (max-width:767px) {
div#page-section-5fd63cbbc4373837b905ef57>.row {
    display: float;
    justify-content: space-between;
    align-items: center;
  width: 50% !important;
  float: left;
}}

Hi! I'm trying to do the same thing on my side, but my images are all still in 1 single column when on mobile, just smaller when I use this code. The link is https://www.nuligoods.com/about-1

Any help is so appreciated!

@tuanphan

On 12/14/2020 at 7:53 AM, TOMweb said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-YOURSECTIONID>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;
}
}

🙂

Hi! I'm trying to do the same thing on my side, but my images are all still in 1 single column when on mobile, just smaller when I use this code. The link is https://www.nuligoods.com/about-1

This is the code I'm using:

@media screen and (max-width:767px) { div#page-section-603dd0a5df73097abcd0eda4>.row {
    display: float;
    justify-content: space-between;
    align-items: center;
    width: 50% !important;
  float: left;
}}
@media screen and (max-width:767px) { div#page-section-603dd0a5df73097abcd0eda4>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;
}}

Any help is so appreciated!

@tuanphan

On 3/2/2021 at 12:57 PM, Leah007 said:

Hi! I'm trying to do the same thing on my side, but my images are all still in 1 single column when on mobile, just smaller when I use this code. The link is https://www.nuligoods.com/about-1

This is the code I'm using:

@media screen and (max-width:767px) { div#page-section-603dd0a5df73097abcd0eda4>.row {
    display: float;
    justify-content: space-between;
    align-items: center;
    width: 50% !important;
  float: left;
}}
@media screen and (max-width:767px) { div#page-section-603dd0a5df73097abcd0eda4>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;
}}

Any help is so appreciated!

@tuanphan

Remove your code & add this code

/* Mobile images side by side */
@media screen and (max-width:767px) {
div#page-section-603dd0a5df73097abcd0eda4 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-603dd0a5df73097abcd0eda4 .span-3:nth-child(2n+1) {
    clear: left !important;
}
}

Hi Tuan thank you for that, it worked perfectly on that specific page, however I've since updated my home page and when I tried to replicate that code (with updating the section id) it no longer works.

This is my current home page: https://www.nuligoods.com/

I'd still like to have each image in columns of 2 on mobile, ideally with the small line of text underneath still placed underneath (but if this isn't possible I'd settle for just the images in columns!)

Would you be able to help still?

Thank you so much you really are a life saver!

Hi @tuanphan thank you for that, it worked perfectly on that specific page, however I've since updated my home page and when I tried to replicate that code (with updating the section id) it no longer works.

This is my current home page: https://www.nuligoods.com/

I'd still like to have each image in columns of 2 on mobile, ideally with the small line of text underneath still placed underneath (but if this isn't possible I'd settle for just the images in columns!)

Would you be able to help still?

Thank you so much you really are a life saver!

On 3/11/2021 at 12:18 PM, Leah007 said:

Hi @tuanphan thank you for that, it worked perfectly on that specific page, however I've since updated my home page and when I tried to replicate that code (with updating the section id) it no longer works.

This is my current home page: https://www.nuligoods.com/

I'd still like to have each image in columns of 2 on mobile, ideally with the small line of text underneath still placed underneath (but if this isn't possible I'd settle for just the images in columns!)

Would you be able to help still?

Thank you so much you really are a life saver!

Hi. Do you still need help?

5 hours ago, tuanphan said:

Hi. Do you still need help?

@tuanphanyes please!

1 hour ago, Leah007 said:

@tuanphanyes please!

I see you used Image Block + Markdown to add image/text. Whey not use Markdown only (you can add text, link, image in Markdown), or add Image block only.

Will be easier to use code if you this block.

https://support.squarespace.com/hc/en-us/articles/205813788-Markdown-Blocks

@tuanphan I didn't know that you could do that thank you!! I've done it for the first two images (shop clothing and shop accessories) but now Squarespace is doing this thing where, when two markdown blocks are right next to each other, it auto merges them into a single markdown block, so I haven't done the last two yet. Would this get in the way of coding them to display side by side?

Previously, to get around this issue, I've added spacer blocks in between each markdown block and then used display: none to hide the space from showing on desktop views (they already don't show on mobile as far I know). Would this still allow me to code each block into columns??

Thanks again for all your help, you're really a lifesaver

Site as it is now: https://www.nuligoods.com/

@tuanphan hmm in working on it a little bit further, I don't think putting the image in markdown will work for what I'm trying to do, as I want the image itself to be an active link to another page. If I place the image in markdown then I haven't been able to make it a working link, as it seems the "link" slot for the image is used up by the link to the image url itself.

Do you have any suggestions for me please? Thanks so much!!

@tuanphan this is how I have my markdown setup:

![(https://static1.squarespace.com/static/5f3df2611fe18e5f414e4b02/t/605ab451b49fa618a960c266/1616557141605/black+trench+for+home.jpg)][0]

## [<u>SHOP CLOTHING</u> (pictured: vintage black trench, $85 CAD)][1]

[0]: /s/black-trench-for-home.jpg
[1]: https://www.nuligoods.com/shop/clothes

On 3/24/2021 at 11:22 AM, Leah007 said:

@tuanphan this is how I have my markdown setup:

![(https://static1.squarespace.com/static/5f3df2611fe18e5f414e4b02/t/605ab451b49fa618a960c266/1616557141605/black+trench+for+home.jpg)][0]

## [<u>SHOP CLOTHING</u> (pictured: vintage black trench, $85 CAD)][1]

[0]: /s/black-trench-for-home.jpg
[1]: https://www.nuligoods.com/shop/clothes

Did you solve?

@tuanphan No. I still can't figure out how to make the markdown blocks appear side by side (2 columns) on mobile, and I'm also trying to figure out a way to make the images in the markdown block act as links. Appreciate any help you can give me!

On 3/27/2021 at 7:16 AM, Leah007 said:

@tuanphan No. I still can't figure out how to make the markdown blocks appear side by side (2 columns) on mobile, and I'm also trying to figure out a way to make the images in the markdown block act as links. Appreciate any help you can give me!

Hi. Add to Design > Custom CSS

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

On 3/30/2021 at 9:33 AM, tuanphan said:

Hi. Add to Design > Custom CSS

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

 

Hi tuanphan, 

Are you able to help? I've followed this thread but have the same issue.

I've put that code in my CSS but it's only working on some linked text, not the image poster blocks.

@tuanphan Amazing thank you so much!

On 4/1/2021 at 10:09 PM, Packwood said:

Hi tuanphan, 

Are you able to help? I've followed this thread but have the same issue.

I've put that code in my CSS but it's only working on some linked text, not the image poster blocks.

 

Can you share link to page where you have problem?

On 4/5/2021 at 2:34 PM, tuanphan said:

Can you share link to page where you have problem?

Sure - https://www.tudoofood.com/support

On 4/10/2021 at 8:39 PM, Packwood said:

Sure - https://www.tudoofood.com/support

Hi. Add to Design > Custom CSS

/* Posters side by side */
@media screen and (max-width:767px) {
div#page-section-5f634825731cc06411c4b7da .span-4 .image-block {
    width: 50% !important;
    float: left !important;
    padding: 0 !important;
    clear: none !important;
}
div#page-section-5f634825731cc06411c4b7da .span-4 .image-block:nth-child(2n+1) {
    clear: left !important;
}
}

1 hour ago, tuanphan said:

Hi. Add to Design > Custom CSS

/* Posters side by side */
@media screen and (max-width:767px) {
div#page-section-5f634825731cc06411c4b7da .span-4 .image-block {
    width: 50% !important;
    float: left !important;
    padding: 0 !important;
    clear: none !important;
}
div#page-section-5f634825731cc06411c4b7da .span-4 .image-block:nth-child(2n+1) {
    clear: left !important;
}
}

 

Thankyou so much tuanphan, that's amazing work! 

Helped me a great deal 🙂

On 4/10/2021 at 8:39 PM, Packwood said:

Sure - https://www.tudoofood.com/support

I see the site has some problems. If you need to fix, just comment below

Site URL – https://www.tudoofood.com/

1. (Desktop-Footer) e- email on same line?

2. (Tablet-Support) Increase section width?

3. (Tablet-Footer) Increase email text column width?

4. (Mobile-Homepage) Change order of some images/text?

5. (Mobile-About) Want to make image fullsize?

6. (Tablet-Pricing) Align these pricing columns?

7. (Tablet-Pricing) Reduce text size?

5 hours ago, tuanphan said:

I see the site has some problems. If you need to fix, just comment below

Site URL – https://www.tudoofood.com/

1. (Desktop-Footer) e- email on same line?

2. (Tablet-Support) Increase section width?

3. (Tablet-Footer) Increase email text column width?

4. (Mobile-Homepage) Change order of some images/text?

5. (Mobile-About) Want to make image fullsize?

6. (Tablet-Pricing) Align these pricing columns?

7. (Tablet-Pricing) Reduce text size?

Thanks tuanphan! That's very kind of you.

I've amended them all except 4. & 5. - any ideas how to keep 4's arrangement but only change it on mobile?

On 4/15/2021 at 8:28 AM, tuanphan said:

Hi. Add to Design > Custom CSS

/* Posters side by side */
@media screen and (max-width:767px) {
div#page-section-5f634825731cc06411c4b7da .span-4 .image-block {
    width: 50% !important;
    float: left !important;
    padding: 0 !important;
    clear: none !important;
}
div#page-section-5f634825731cc06411c4b7da .span-4 .image-block:nth-child(2n+1) {
    clear: left !important;
}
}

 

Hey Tuanphan. I have tried to add this, but it have not worked, can you maybe guide me? my website is https://www.s7udiostars.com/ 🙂