Hi everyone,
I’ve completed the Survey Form project, but I know the page isn’t as responsive as it should be, particularly for mobile devices etc. I’d love some tips on how I can crack this -
I’m thinking add media queries, but is there anything else I should be doing? Anything I can read up on? The link to my page is below:
Thanks in advance for any help!
Howdy!
I think Media Queries is a good and lightweight way to make a website responsive. So, go for it!
Have a good day and let me know!
@cwright718, I don’t think this is the way you want to go. You’ve made the form wide with the way you’ve styled it. Adding a media query to undo what you’ve done would not be the way to go.
To help you visualize how you have elements in your form you can temporarily add the following universal selector
* {
border: solid 1px red;
}
There will be a lot of boxes. But then maybe take that away and break it down by adding that line to just one of the elements.
Once you see that everything is a box you can start styling being careful to not make any one element extremely wide.
Other things you can look at / think about
You’re on the right track it’s just that you’ve made the form itself very narrow and the textarea very wide. (Style that with CSS instead)
Let us know if there’s something you don’t understand or are struggling with.
I think the best thing you can do to make sure your page is responsive is to use a narrow-first approach to styling the page. Narrow your browser as far as it will go and style the page for that narrow width. This will be your base CSS. You will find the use of margins/padding/widths will be minimal at this narrow width. This is a good thing.
Only after you have the page looking good at the narrow width then you can start widening the browser and possibly add media query break points if needed for wider view ports. To be honest, for a page this simple, I think you will find you don’t need any break points. What you will probably need though is to set a max-width on certain elements to keep them from getting too wide. This will also help you center them on the page using auto side margins. For example, to center the <header>, set a max-width (for example, 50em) and then set the margin as 5rem auto and it will center nicely at wider view ports. You’ll want to do something similar with the survey box as well.
Thanks so much for all your advice! I’ve played about with the background, and I think I’ve styled the text area correctly now, but I seem to have lost the responsiveness on the form element as a whole. Is it because I’ve fixed the background using CSS on the overall HTML?
It’s because you have really big side margins on the <header> and survey-box <div>. Instead, use auto side margins to center them. Also, don’t set a width on them, set a max-width on them. That way they will narrow down as the browser window gets narrower and won’t create a horizontal scroll bar. Same for the <textarea>.
In general, you always want your elements to be able to get skinnier as the view port narrows so that a horizontal scroll bar does not appear. If you need to set a width on an element, use responsive units, such as percentages or vw.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.