Prevent page from be dragged left and right in mobile version

Question

This page I'm working on has the following issue:

• when you are browsing through the mobile responsive mode (both from mobile device or Chrome's developer tools), you have the possibility to drag the page on the X axis, from the left to the right. This is not a desired effect since I just want the page to scroll on the Y axis.

I'm trying to prevent it with this, but no luck.

.body {
  overflow-x: hidden;
}

Anyone can help?

Answer 1

Replace your css with :

.wrapgrid{
     overflow-x: hidden;
 }