Responsiveness of Grid

I have created a form utilizing Grids that is identical to the form found in the Callisto template (https://preview.webflow.com/preview/callisto-template?utm_medium=preview_link&utm_source=designer&utm_content=callisto-template&preview=8b528ec211819d0626bd7e63a750b4d7&mode=preview&pageId=5ffa0e950e826a3aa1982211).

However, while the figures and form within the Grid of the template move about responsively depending on the screen size, mine simply gets compressed on both sides. Can someone tell me how I can emulate that in my project?

PS. I bought the Callisto template but deleted that page. The classes that came with that page were somehow deleted as well.


Here is my site’s Read-Only: https://preview.webflow.com/preview/test-project-121?utm_medium=preview_link&utm_source=designer&utm_content=test-project-121&preview=7620f662a73d0ae30476d5adcbb52b27&pageId=60aa93b01530713f8654a699&workflow=preview

@ricky_rollin001 So in order to emulate the same responsiveness, you must edit the number of columns/rows on the lower breakpoints, then move the elements within the grid accordingly.

Here is a video tutorial by @McGuire on grid: Grid | Webflow University