Jump to content

Website Images Side by Side in Mobile Version

Go to solution Solved by tuanphan,

Recommended Posts

Hello, I am trying to change my clickable navigation images on my website's home page on mobile version from being stacked on top of one another to being side by side.

www.ephinabridal.com

I've attached the desktop version, mobile version, and a graphic of what outcome I've been trying to create. I realize that images being two by two might look better than having all four side by side, so if I were able to choose between or edit the css code that would be amazing.

I haven't been able to find the correct div page setting when inspecting the code unfortunately to test this all myself. I appreciate the help 

 

Current Web Version: 

Imagessidebyside.thumb.png.9fe023eae1a8e6b30832c40f9ffe2bba.png

 

Current Mobile Version: 

imagesstackedmobile.thumb.png.a93e2ff86b20cc436e9e4a664af7189d.png

 

Desired Mobile Version(s): 

imagelayoutidlike.thumb.png.c2b92146ed45f62775eec59154c80a47.png

Link to comment
  • Replies 4
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

Add to Design > Custom CSS
 

/* mobile images side by side */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1678480347454_107171+.row .span-3 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1678480347454_107171+.row .span-3 .image-block {
    width: 80% !Important;
}
}

image.png.93f28bdd944a5c854438a68a0b30dd3e.png

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...
On 3/12/2023 at 3:09 AM, tuanphan said:

Add to Design > Custom CSS
 

/* mobile images side by side */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1678480347454_107171+.row .span-3 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1678480347454_107171+.row .span-3 .image-block {
    width: 80% !Important;
}
}

image.png.93f28bdd944a5c854438a68a0b30dd3e.png

Thank you so much tuanphan! It worked and looks great. The 2x2 is definitely the best option.

Link to comment
  • 9 months later...

@tuanphan I am trying to figure out how to do this as well. No luck even with chat-gpt. can you give me a code for the following site: https://www.voltpaperscissors.com/

Thanks a lot in advance!

It is for pictures below the header. They should align in a 2x2 grid on mobile. (update: I moved the element to the bottom of the page until it is fixed)

image.thumb.png.c859e796b1b0013c031754d3d7e51d70.png

 

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