Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Images side by side on mobile


TOMweb

Question

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

 

Link to comment

Recommended Posts

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

 

Screenshot 2021-04-01 at 16.08.52.png

Can you share link to page where you have problem?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

tudoofood.com-01-min.png

2. (Tablet-Support) Increase section width?

tudoofood.com-02-min.png

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

tudoofood.com-03-min.png

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

tudoofood.com-04-min.png

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

tudoofood.com-05-min.png

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

tudoofood.com-06-min.png

7. (Tablet-Pricing) Reduce text size?

tudoofood.com-07-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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!

Link to comment
  • 0

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!

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

Link to comment
  • 0

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

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

 

Screenshot 2021-04-01 at 16.08.52.png

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

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

tudoofood.com-01-min.png

2. (Tablet-Support) Increase section width?

tudoofood.com-02-min.png

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

tudoofood.com-03-min.png

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

tudoofood.com-04-min.png

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

tudoofood.com-05-min.png

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

tudoofood.com-06-min.png

7. (Tablet-Pricing) Reduce text size?

tudoofood.com-07-min.png

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?

 

 

 

 

Link to comment
  • 0
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/ 🙂

Link to comment
  • 0
On 6/13/2021 at 4:47 AM, s7udiostars said:

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/ 🙂

Hi. You mean 9 poster blocks on homepage? Make them 2 items/row on mobile?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...