How to disable responsive mobile design on single page

Hi there, 

I am trying to disable the responsive mobile design of a specific page on my website. I have tried several custom css codes but nothing seems to work. I just want the icons you see here to stay the way they look when you visit the page using a phone or a smaller screen. I want the layout of the images to stay the same regardless of the screen size. 

Could anyone help me?

Thank you so much!

If you know basic CSS, you can set width for all .col class (I solved similar question a few days ago)

(add !important to after, eg: width: 20% !important;)

If you don't know, please let me know, I will take a look

Hi Tuanphan! Thank you so much for your answer! Unfortunately, my knowledge of CSS is limited, and what I tried didn't work. Could you explain what you say further? I would really appreciate it. Thank you so much.

Hi @tuanphan, I was wondering if you could help me with this. Thank you.

7 hours ago, Daguerrotipo said:

Hi @tuanphan, I was wondering if you could help me with this. Thank you.

Add to Home > Design > Custom CSS

div#page-5ea609deb96d8067d451eb1f>.row:nth-child(2)>.span-6 .span-2 {
    width: 33.33% !important;
    float: left !important;
}

@tuanphan thank you so much! For some reason, now the last two icons look smaller than the rest in a big screen. I tried to fix it but it didn't work. What could be the issue?

Thanks again!

Hi @tuanphan I was wondering if you could give me a hand with this. Now the last two icons look smaller than the rest of icons in a big screen. Also, I would like the icons to be smaller and positioned on the left so we can still see the foot of the background image. I have tried different codes but I can't figure it out. 

I would appreciate your help. Thank you!!

Hi. Sorry for the delay. Overloading.

Edit above code to this

@media screen and (max-width:767px) {
div#page-5ea609deb96d8067d451eb1f>.row:nth-child(2)>.span-6 .span-2 {
    width: 33.33% !important;
    float: left !important;
}
}

Thank you @tuanphan! That's amazing! When I shrink the browser there's a point where the icons look like this though. How could I fix it? 

Thank you!!

21 hours ago, Daguerrotipo said:

Thank you @tuanphan! That's amazing! When I shrink the browser there's a point where the icons look like this though. How could I fix it? 

Thank you!!

I don't understand. Can you clarify this?

Apologies, @tuanphan. Yes, here's a screenshot of the issue I'm encountering. As you can see, two of the icons look smaller than the rest at a certain screen size. Thank you for your help as always.

8 hours ago, Daguerrotipo said:

Apologies, @tuanphan. Yes, here's a screenshot of the issue I'm encountering. As you can see, two of the icons look smaller than the rest at a certain screen size. Thank you for your help as always.

Which screensize, try this

@media screen and (min-width:641px) and (max-width:771px) {
div#page-5ea609deb96d8067d451eb1f>.row:nth-child(2)>.span-6 .span-4 .span-2 {
    width: 50% !important;
}
}

Thank you so much @tuanphan For some reason when now I move that page to an Index, the background image disappears. See attached. Do you know why that is? How could I fix it? Thanks!