I have created survey form and your suggestions are needed to improve this page

To make this page responsive, how should i improve it?

1 Like

It looks like you are going up on your sizing.

Your initial size is 700x690.

Have you looked at it as a 460px or 320px viewport? I would style it for the smaller first, then medium which you seem to have.

Thank you…I have done some modifications in it ,please can you go through it once.

Use the Chrome Inspector on this page. Use Responsive for the Nexus 5 viewport: 360 x 640.

Your original main width is 620. But your max-width of 620 expands by percentages. I don’t think that’s what you wanted:

@media (max-width: 620px) { /* CSS Rules */
box-sizing: border-box;
width: 130% ;
width: 80%;

You want the larger box to fit into a smaller box, so go more 80% instead of 130%

Yes absolutely. Thanks Mam.

Use media querys (max-width) to change the width of the whole main on smaller screens.

Set it to 85% on big screens

Set it to 90% on, for instance, 800px;

then 95% on 500px;

The yellow title is too hard to read.

It would look better if you swapped the texture for the body rather then main.


Please hit the reply button or i do not get notified.

List of helpful websites for web design (and inspiration) --> https://codepen.io/Mike-was-here123/post/check-out-these-sites

1 Like