Jump to content

Images side by side on mobile

Go to solution Solved by TOMweb,

Recommended Posts

  • 1 year later...

Hi @tuanphan! I see you've managed to help a lot of people here with their mobile version... and I have a similar issue with my website https://www.continuityguide.net.

As you can see in the screenshots, the images doesn't move next to each other in the mobile view. And my speedy navigation buttons moves in over all of the text... (those are created with a code block on each page).

Is this anything you can help me with? All the best! //Tommy

Mobile.png

Desktop.png

Link to comment
On 5/5/2024 at 7:19 PM, TWesters said:

Hi @tuanphan! I see you've managed to help a lot of people here with their mobile version... and I have a similar issue with my website https://www.continuityguide.net.

As you can see in the screenshots, the images doesn't move next to each other in the mobile view. And my speedy navigation buttons moves in over all of the text... (those are created with a code block on each page).

Is this anything you can help me with? All the best! //Tommy

Mobile.png

Desktop.png

Do you still need help? I see you changed to 1 item/row on desktop, no side by side images now..

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

@tuanphan Hi! Yes, I haven't figured out how to solve it yet. The images you see "Avengers" - "Marvel Knights" and "Spider-Man" - "X-Men" gets stacked on mobile but I don't want them to. On Desktop they are side by side, and also on my ipad 12 inch. But on my iphone they get stacked. I'm not sure what you mean that I've changed them... I haven't 😄

Do you know how I can solve this? I have tried all sorts of things, but I have no personal coding experience.

 

Cheers! /Tommy

Link to comment
19 hours ago, TWesters said:

@tuanphan Hi! Yes, I haven't figured out how to solve it yet. The images you see "Avengers" - "Marvel Knights" and "Spider-Man" - "X-Men" gets stacked on mobile but I don't want them to. On Desktop they are side by side, and also on my ipad 12 inch. But on my iphone they get stacked. I'm not sure what you mean that I've changed them... I haven't 😄

Do you know how I can solve this? I have tried all sorts of things, but I have no personal coding experience.

 

Cheers! /Tommy

I think I checked wrong page, but I can't find Planet X Page like as your screenshot

https://www.continuityguide.net/

current on homepage, I see all images already stacked on desktop

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
21 hours ago, TWesters said:

Hi @tuanphan Here is the page: https://www.continuityguide.net/planetx and the images works as buttons containing links. There will be many pages that has the four images side by side as you can see. So a code that targets specific ID's will be a hassle, so best is if we can have a code that is broader in some way. Cheers!

Try this CSS for PlanetX page

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1652430677247_43711~.row {
    column-count: 2;
    column-gap: 5px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@tuanphan Hi! I don’t know if there’s a special css injection for specific pages outside of code blocks? But I did put it in the css injection for the site, and the Planet X page on mobile turned out like on this image, so it’s close!

IMG_5634.jpeg

Link to comment
17 hours ago, TWesters said:

@tuanphan Hi! I don’t know if there’s a special css injection for specific pages outside of code blocks? But I did put it in the css injection for the site, and the Planet X page on mobile turned out like on this image, so it’s close!

IMG_5634.jpeg

Try this code

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1652430677247_43711~.row {
    column-count: 2;
    column-gap: 5px;
}
    div#block-yui_3_17_2_1_1652430677247_43711~.row .image-block {
        padding: 10px !important;
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
Posted (edited)

Hi @tuanphan Thank you so much for helping me! The padding and gap yielded the result of the first image. The four buttons falls a bit to the side and too close to the image above. I tried to change the padding and the gap to 18 and 1 respectively and it got the result of the second image. It's better aligned to the image above and to the sides, but I can't get the images bigger and closer to each other... any ideas? All the best!

EDIT: When I looked at my phone, only two the two left images could be seen, so the other two either disappeared or ended up beneath the left two.


EDIT:
I found this code that you helped another with:

@media screen and (max-width:640px) {
    section[data-section-id="61936e116106c5293ce77bd2"] .span-6,
    section[data-section-id="6628e9c0f9a69c02cefbb9f0"] .span-6,
section[data-section-id="6628ebdab7648e4046233b75"] .span-6,
section[data-section-id="6628eda6e15d8540229fe86f"] .span-6, 
section[data-section-id="6628ef94939c0a246bdef7ee"] .span-6 {
        width: 50% !important;
        float: left !important;
    }
}

It works perfectly what I can see, only thing is I need to put in all the section ID's across the website. Is there a way to apply this to the full website, and not use section ID's? I have added this code fully to the Planet X pages now (five of them).

10padding.png

18padding.png

Edited by TWesters
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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.