Images side by side on mobile

Hi @tuanphan -- Thank you for all your help in this thread! I am having trouble getting this to work for my own site. I'm rebuilding my home page here: https://katemelvin.com/home-1

I tried using this code found in this thread but it's not working. Any idea?

Quote

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

Thank you 🙂

17 hours ago, katemelvindesign said:

Hi @tuanphan -- Thank you for all your help in this thread! I am having trouble getting this to work for my own site. I'm rebuilding my home page here: https://katemelvin.com/home-1

I tried using this code found in this thread but it's not working. Any idea?

Thank you 🙂

Hi. Which images on the page?

@tuanphan I was trying to do this with the project images on my homepage katemelvin.com. I think I got it working though through trying out your snippets of code. Thank you!

On 1/3/2022 at 3:23 AM, katemelvindesign said:

@tuanphan I was trying to do this with the project images on my homepage katemelvin.com. I think I got it working though through trying out your snippets of code. Thank you!

Did you solve or still need help?

Also, do you want to keep desktop menu on mobile/tablet, to the header will be: Logo - Home/About? (You can create a new question or send me a message)

wow @tuanphan, you're so helpful! Hi, could you please help me with my website too, if possible?

I'd like to change mobile view for those two pages:
https://cossetceramics.com/sculpture
https://cossetceramics.com/lighting

Preferably, identical to the desktop version with a combination of 1 to 3 images per row. If this is not possible, I would like to have 3 images per row throughout all page. 

Thank you very much and I hope you have a lovely day.

Warm regards,
Tatsiana

On 2/9/2022 at 6:27 AM, Tatsiana said:

wow @tuanphan, you're so helpful! Hi, could you please help me with my website too, if possible?

I'd like to change mobile view for those two pages:
https://cossetceramics.com/sculpture
https://cossetceramics.com/lighting

Preferably, identical to the desktop version with a combination of 1 to 3 images per row. If this is not possible, I would like to have 3 images per row throughout all page. 

Thank you very much and I hope you have a lovely day.

Warm regards,
Tatsiana

Hi.

With sculpture page, try adding this to Design > Custom CSS

/* Sculpture mobile */
@media screen and (max-width:767px) {
div#page-61fe5587c48bb04a45c8de05 .span-4 {
    width: 33.3333% !important;
    float: left !important;
}

div#page-61fe5587c48bb04a45c8de05 .span-6 {
    width: 50% !important;
    float: left !important;
}
}

With lighting, use this code

/* lighting mobile */
@media screen and (max-width:767px) {
div#page-5f881df7cd44cc5a9ec1b154 .span-4 {
    width: 33.3333% !important;
    float: left !important;
}

div#page-5f881df7cd44cc5a9ec1b154 .span-6 {
    width: 50% !important;
    float: left !important;
}
}

On 12/14/2020 at 3:53 PM, 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 just wondered if you could help - I want to move all of the payment method images in my footer into a row on mobile view but I can't figure out how to do it - the website address is:
https://lavender-greyhound-hr46.squarespace.com/

and the PW is: ddh22

On 3/20/2022 at 8:50 AM, gabs_mol said:

hi I just wondered if you could help - I want to move all of the payment method images in my footer into a row on mobile view but I can't figure out how to do it - the website address is:
https://lavender-greyhound-hr46.squarespace.com/

and the PW is: ddh22

Add to Design > Custom CSS

/* Mobile Payment icons */
@media screen and (max-width:767px) {
div#block-f7fe8092d14d29a5e9c3+.row>.span-1 {
    width: 25% !important;
    float: left !important;
}
div#block-f7fe8092d14d29a5e9c3+.row>.span-7 {
    width: 75% !important;
    float: left !important;
}
div#block-f7fe8092d14d29a5e9c3+.row>.span-7 .span-1 {
    width: 33.3333% !important;
    float: left !important;
}
}

Hello!

Working on putting card images side by side. Desktop - 4 side by side, mobile would love to have 2 side by side. 

Used this code: 

div#block-yui_3_17_2_1_1647003021702_10784~.row .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-6227626aae998921f9a40009 .span-3 {
    clear: left !important;
}

But I'm having weird gaps, check screenshots. Obviously don't want that.

Website: https://bird-apricots-y5tt.squarespace.com/

Password: notyetready

18 hours ago, Anele0610 said:

Hello!

 

Working on putting card images side by side. Desktop - 4 side by side, mobile would love to have 2 side by side. 

Used this code: 

div#block-yui_3_17_2_1_1647003021702_10784~.row .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-6227626aae998921f9a40009 .span-3 {
    clear: left !important;
}

But I'm having weird gaps, check screenshots. Obviously don't want that.

 

Website: https://bird-apricots-y5tt.squarespace.com/

Password: notyetready

Hi. It looks fine to me. Did you solve it?

On 3/26/2022 at 9:27 AM, tuanphan said:

Hi. It looks fine to me. Did you solve it?

Yes, I solved that part, however the exact same section has a different problem - the first row has social links and on mobile they are not clickable. other rows are fine. 

link: metatrekkers.io 

section: Team on homepage

On 3/29/2022 at 11:19 PM, Anele0610 said:

Yes, I solved that part, however the exact same section has a different problem - the first row has social links and on mobile they are not clickable. other rows are fine. 

link: metatrekkers.io 

section: Team on homepage

Hi,

You haven't set clear attribute when using float, so the problem appear

Don't remove any code in your current code. Add this to Design > custom CSS

/* Team section icons not clickable */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1647003021702_10784~.row .span-6 {
    clear: both !important;
}
}

Hello @tuanphan!

Having the problem of putting images side-by-side on mobile. 

link:

http://metatrekkers.io/the-team 

Thank you!

14 hours ago, Anele0610 said:

Hello @tuanphan!

 

Having the problem of putting images side-by-side on mobile. 

link:

http://metatrekkers.io/the-team 

 

Thank you!

Add to Design > Custom CSS

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

On 4/5/2022 at 11:07 AM, tuanphan said:

Add to Design > Custom CSS

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

 

Hey @tuanphan!

It doesn't work 😞

Any other ideas?

Anele

On 4/20/2022 at 3:59 AM, Anele0610 said:

Hey @tuanphan!

 

It doesn't work 😞

Any other ideas?

 

Anele

Try checking again when you're log out. Recently SS has a bug, prevent CSS show on Editing Mode.

Hello @tuanphan ! Thanks for all the help so far, I have another question. Been trying to do this, have them now hidden on mobile, but want them next to each other, all five if possible. Code should be on 174

Anything I tried just split the images in half for some reason.

https://gold-cheetah-exh9.squarespace.com/home

PW: Geheim123

19 hours ago, joannfotografie said:

Hello @tuanphan ! Thanks for all the help so far, I have another question. Been trying to do this, have them now hidden on mobile, but want them next to each other, all five if possible. Code should be on 174

Anything I tried just split the images in half for some reason.

https://gold-cheetah-exh9.squarespace.com/home

PW: Geheim123

Remove your display none code & add this 

/* Mobile home show 5 images same line */
@media screen and (max-width:767px) {
div#page-section-62251dd1b2a4724c0a2faf8d .span-2 {
    width: 20% !important;
    float: left !important;
}
div#page-section-62251dd1b2a4724c0a2faf8d .span-2 .image-block {
    padding: 0;
    width: 90%;
    margin: 0 auto;
}}

On 4/24/2022 at 9:55 AM, tuanphan said:

Remove your display none code & add this 

/* Mobile home show 5 images same line */
@media screen and (max-width:767px) {
div#page-section-62251dd1b2a4724c0a2faf8d .span-2 {
    width: 20% !important;
    float: left !important;
}
div#page-section-62251dd1b2a4724c0a2faf8d .span-2 .image-block {
    padding: 0;
    width: 90%;
    margin: 0 auto;
}}

 

This works, thank you so much!

On 4/22/2022 at 5:11 PM, tuanphan said:

Try checking again when you're log out. Recently SS has a bug, prevent CSS show on Editing Mode.

No it doesnt work even when logged out 😞

On 4/27/2022 at 3:53 PM, Anele0610 said:

No it doesnt work even when logged out 😞

Try adding this new code

@media screen and (max-width:767px) {
div#page-section-624b260eac53a13d4b644746 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-624b260eac53a13d4b644746 .span-3:nth-child(2n+1) {
    clear: left;
}}

Id also like to piggy back onto this thread, I have 2x images in the footer of a clients site that look huge on mobile, id like to place them side by side but cant seem to get the codes in the thread to work.

https://lime-raspberry-ywg5.squarespace.com/

PW GSR123

These are the 2 images that i'd like to be placed side by side on mobile. They are in the footer.

On 4/21/2023 at 7:19 AM, kellicox90 said:

Id also like to piggy back onto this thread, I have 2x images in the footer of a clients site that look huge on mobile, id like to place them side by side but cant seem to get the codes in the thread to work.

https://lime-raspberry-ywg5.squarespace.com/

PW GSR123

These are the 2 images that i'd like to be placed side by side on mobile. They are in the footer.

Add to Design > Custom CSS

/* Mobile Footer Images */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1680055391599_144574+.row .span-2 {
    width: 50% !important;
    float: left !important;
}
}

On 4/23/2023 at 10:45 AM, tuanphan said:

Add to Design > Custom CSS

/* Mobile Footer Images */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1680055391599_144574+.row .span-2 {
    width: 50% !important;
    float: left !important;
}
}

 

Thanks @tuanphan This works perfectly, I'm just trying to get it to do the same thing on my /towing page (I've used an alternative footer for this section but with the same images that i'd like to be side by side) I cant seem to replicate it and get it to work, are you able to see?

3 hours ago, kellicox90 said:

Thanks @tuanphan This works perfectly, I'm just trying to get it to do the same thing on my /towing page (I've used an alternative footer for this section but with the same images that i'd like to be side by side) I cant seem to replicate it and get it to work, are you able to see?

Use this code

@media screen and (max-width:640px) {
div#page-section-63ffad66f528547186f9170f>.row:nth-child(3) .span-2 {
    width: 50% !important;
    float: left !important;
}
}