I just completed my survey form, unfortunately this took me days. I would like to list the major challenges I faced and hope that someone clarifies them for me.
I had issues making my absolute positioned element (#survey-form) responsive but I finally got a hang of it. Could someone please tell me the best way to make your form responsive when it is positioned absolute.
How do you make your website responsive without having to specify media queries for every viewport. This was quite challenging for me. My website isn’t fully responsive as the form’s button keeps jumping around as you resize. A comment on how to fix this would be appreciated.
I surely had to write my code several times but it was worth it. I learnt from it.
I’ll start by answering your second question first. Use the ‘narrow-first’ approach. Narrow your browser window as skinny as it will go and style your form so that it looks good at this narrow width. This will be your base CSS. Avoid using absolute positioning and setting heights on elements. Use flexbox/grid to handle positioning if needed.
After you have the skinny look perfected then you can gradually widen your browser until you find a spot where you feel you have enough room to rearrange elements on the page for a wider view port. Add your CSS break point there (using min-width and em units) and add additional styling under that break point. To be honest, you probably don’t even need break points for a simple form like this. If you do your skinny styling correctly it should stay responsive as you widen the view port without any break points.
As for your first question, don’t use absolute positioning unless absolutely necessary. Absolute positioning takes the element out of the normal flow and thus makes it a lot harder keep responsive.
Do not use fixed dimensions on elements. Instead, use max-width/height and relative units like % and vw to keep everything responsive.
Done this way you shouldn’t need to use a media query with the Tribute page or Survey Form projects.
This is a really nice survey form. I would suggest that you thin the borders on the text inputs and also make the submit button’s size animate on mouse hover.