I'm in need of some very basic guidance on design. This is my very first website so be gentle!
I am having some issues with the size and spacing of the input field and submit button of my email form on my landing page. So that they sit next to each other I have both elements sitting in a div block, and then I floated the input field left and the submit button right.
On desktop I made the input field 60% width and the submit button auto width so it contains the full text.
On tablet it seemed to work better to have the input field at 50% and the submit button at a fixed width of 229px.
Then you can see I haven't been able to make it work on mobile at all. In horizontal mode the elements are staggered and similarly in portrait mode they don't sit either next to each other or one on top of the other (which might make more sense so that you can see all the text of both elements).
Am I going about this completely the wrong way? It feels like I am! I think I maybe haven't understood something fundamental about how elements relate to each other and how to achieve clean and consistent positioning across different devices.