Images and text side by side on mobile

Site URL: https://www.voyagerclub.co/the-voyager-bazaar

Hi, I am trying to get 4 product images on desktop (which are set up as individual images and text) to show as two images with text underneath on mobile site. 

https://www.voyagerclub.co/the-voyager-bazaar

Please could someone help me with CSS?

Thank you so much in advance

Sophie

Hi. Add to Design > Custom CSS

/* Mobile 2 products */
@media screen and (max-width:767px) {
div#page-603667b8ff2ff950029331e0>.row:nth-child(2) .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-603667b8ff2ff950029331e0>.row:nth-child(2) .span-3:nth-child(2n+1) {
    clear: left !important;
}
}

and some other problems on your site. Do you want to fix these?

Site URL – https://www.voyagerclub.co/

1. (Mobile-Popup) Text not center on mobile

2. (Mobile-Homepage) Make buttons 2 items/row?

3. (Mobile) The page looks long. Want to add a back to top button?

4. (Tablet-Africa) White bar on right of screen

5. (Mobile-Africa) Header overlap content