Help for side by side image in Mobile

Site URL: https://apetrippy.com/

I would like my image to be side by side may be 2 or 3 image per row on mobile. https://apetrippy.com/

However, the mobile display as one image vertically stacked. I have tried my best, but i have no idea how to change it.

Dont know how to search the 'block-yui' neither, may any one post the CSS code to help to adjust all images in 3 sections to display correctly in mobile by disabling the one image vertically stacked.

My testing

Thanks so much for your help!!!! It works!!! May I be greedy to know how to set 3 image per row as well?

Appreciate much for your help

On 1/2/2022 at 10:14 PM, nemoocean said:

Thanks so much for your help!!!! It works!!! May I be greedy to know how to set 3 image per row as well?

 

Appreciate much for your help

Just change 50% to 33.333%

Site URL: https://apetrippy.com/

I have tried to add new sections using the above code,  but 2 images displayed in mobile is not aligined , i tried to re-do and change number, but cannot aligin it properly in mobile view. Anyone can help me? Thankss

@media only screen and (max-width: 767px) {
  #block-c4cece7b237a75a37fff + .row > .col {
    width: 50% !important; 
    float: left !important
  }
  #block-61d15aa70a469270eb1e1bd1 + .row > .col {
    width: 50% !important; 
    float: left !important
  }
  #block-080f1ec6c4cbd0471f76 + .row > .col {
    width: 50% !important; 
    float: left !important
  }
  #block-319745b2a01ba6fc2191 + .row > .col {
    width: 50% !important; 
    float: left !important
  }
  #block-24780a646f48adcd8b07 + .row > .col {
    width: 50% !important; 
    float: left !important
  }
  #block-61d6ae803eb8cd481902072f + .row > .col {
    width: 50% !important; 
    float: left !important  
  }
}
 

Edit this code

 #block-61d6ae803eb8cd481902072f + .row > .col {
    width: 50% !important; 
    float: left !important  
  }

to this

 #block-61d6ae803eb8cd481902072f+.row>.col {
        width: 50% !important;
        float: left !important
    }
    #block-61d6ae803eb8cd481902072f+.row>.col:nth-child(2n+1) {
        clear: left !important;
    }

it cannot, some are wired

/* Mobile 2 columns */
@media only screen and (max-width: 767px) {
  #block-c4cece7b237a75a37fff + .row > .col {
    width: 50% !important; 
    float: left !important
  }
  #block-61d15aa70a469270eb1e1bd1 + .row > .col {
    width: 50% !important; 
    float: left !important
  }
  #block-080f1ec6c4cbd0471f76 + .row > .col {
    width: 50% !important; 
    float: left !important
  }
  #block-319745b2a01ba6fc2191 + .row > .col {
    width: 50% !important; 
    float: left !important
  }
  #block-24780a646f48adcd8b07 + .row > .col {
    width: 50% !important; 
    float: left !important
  }
  #block-24780a646f48adcd8b07 +.row>.col:nth-child(2n+1) {
        clear: left !important;
  }
  
  #block-61d6ae803eb8cd481902072f + .row > .col {
    width: 50% !important; 
    float: left !important  
  }
  #block-61d6ae803eb8cd481902072f+.row>.col:nth-child(2n+1) {
        clear: left !important;
  }
}