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

Code Feedback
1

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

1 Like
2

Hi,
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.

3

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

4

Hi,
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 */
#main{
box-sizing: border-box;
width: 130% ;
background:white;
}
fieldset
{
width: 80%;
}

5

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

6

Yes absolutely. Thanks Mam.

7

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.

Notes:

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