A couple times I used Flexbox when in doubt for example for the radio and checkbox buttons their parent was already a flex container and displaying the items in a row. However I wanted the radio buttons and checkbox buttons side by side with the text ( in a column ) so I made a new flex container for them. Is that acceptable?
You have the main form width at 50%. Add a media query to of max width 560px and set the same element to 100% or 90% and youâll see how your form gets fit to the size when you access it in mobile.
Can anyone also answer why my dev tools does this to me? When I click a mobile device its just a zoomed in view to the top left. I canât work with it like this.
Between the cursor icons, and the word âELEMENTSâ, there this icon that represents a phone and a tablet. You must have it active. Deselect it and it will go to normal.
I tried that last code you provided but it made my survey more narrow. I prefer the max-width: 90%. It fills the iphoneâs page nicely. Why that last bit you posted? Just a different way to do it?
I donât use max width to direct the element. I only use max width to specify the media query. I only put it there because thatâs what youâre using.
When i open your pen with my phone, the form continues to be narrow, not at 100%. But Iif you like it that way and it fits your iPhone, excellent then.
Since copy/paste from codepen you can ignore the first warning and first two errors.
There are coding errors you should address.
As an aside, the way your code is now with duplicate id's is a good example of why an id should be unique within the document. Bring up your form and click on the the first label of your checkboxes. That is, click on âHTML/CSSâ not the checkbox and notice that âdefinitelyâ in your radio buttons gets selected. Then, click on the next label, âJavaScriptâ and notice the âmaybeâ radio button is selected.