How to make a form and its submission preview page mobile-responsive?

Question

I am facing an issue with making my form and its submission preview page mobile-responsive. In the PC or laptop view, the form layout and the subsequent preview page appear correctly. However, when accessing the form on a mobile device, the alignment and layout are not consistent.

For instance, in the PC view, the preview page spans across 4 pages, whereas in the mobile view, it extends to 8 pages. This discrepancy is causing a usability problem for mobile users.

I would like to seek advice and potential solutions to make the form and its submission preview page responsive across all devices. Is there a way to ensure that the form and the subsequent preview page display consistently regardless of the screen size?

Any guidance or suggestions on achieving a mobile-responsive design for the form and its preview page would be greatly appreciated.

URL: https://onlineapplication.18siddharsresearch.com/first

I am currently working on creating a mobile-responsive layout using Bootstrap's grid system, but I am experiencing difficulties understanding the concept of columns and rows. I have attempted to implement the necessary classes such as "col" and "row", but I'm still not achieving the desired responsive behavior.

Answer 1

i saw your website you need to understand first how to do semantic website like :

<header></header>
<main><form><input type="text"><input type="submit"></form></main>
<footer></footer>

not like this sc of your website