Website Images Side by Side in Mobile Version

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: 

Current Mobile Version: 

Desired Mobile Version(s): 

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

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

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

never mind. I changed my hole page to work around the issue 😉