Stop the stacked resizing on my mobile page only

Site URL: http://www.b2Ss.co

the website is: www.b2ss.co   

the password is: stayinnschool19

Hey everyone thanks for taking the time to even look at this! Im having an issue with the restructuring of my page when moving to mobile. I have set up my site in the way in makes sense to me but who knows if i am even doing this the proper way but what i am trying to achive is the follwing:

i have 4 images that span the screen horizontally across the top. Each image works as an icon more or less and brings you to the corresponding page. When on the computer it shows correctly and how i would like it to be on mobile. I have done some searching around and found a few bits of code to make the icons (images) smaller only on the mobile screen but cant seem to figure out how to remove the stack and line them up horizontally.  

Here is a look at the css i found to make the images smaller.. again idk what im doing but they did get smaller..

/* mobile screens */
@media only screen and (max-width: 640px) {
  #block-yui_3_17_2_1_1557313705830_5807 {
    width: 30%; }
}

/* mobile screens */
@media only screen and (max-width: 640px) {
  #block-yui_3_17_2_1_1557313705830_8124 {
    width: 30%; }
  
}

/* mobile screens */
@media only screen and (max-width: 640px) {
  #block-yui_3_17_2_1_1557313705830_13034 {
    width: 30%; }
}

/* mobile screens */
@media only screen and (max-width: 640px) {
  #block-yui_3_17_2_1_1584416021346_20240 {
    width: 30%; }
}

/* tablet screens */
@media only screen and (max-width: 768px) {
  #block-unique-ID{
  width: 100%;
  }
}

ANY AND ALL HELP WOULD BE GREATLY APPRECIATED!

thank you for your time and help! looking foward to hearing from someone lol

BE SAFE OUT THERE PPL!

LOVE GINO 

Have you solved yet? If not, I can take a look