My surgery form project

HTML-CSS
1

Hi everyone I completed my survey form project and I will like to share it with you so as to know my errors and where I could correct them. Thanks https://codepen.io/willy032/pen/yLXyJBy

2

HI
some things to note imo

  1. form is not responsive. try to use some relative units and @media queries.

  2. You have used Inline css, i would suggest to use External css. It ensures all pages are uniform in look and style creating a cohesive website. You can change the style of your html with just switching 1 file

  3. Your button should have pointer cursor and adding :hover would look much better

  4. There’s a big space between button and bottom of the page

1 Like
3

Thanks but I’m still trying on how to make it responsive. I’m trying all I could. If you can, check out my recent saved code. I won’t mind if you can help me on this. This is the area I am greatly lagging behind.

4

I would suggest you use a narrow-first approach. Narrow your browser as far in as it will go and style the page so it looks good at that narrow width (no horizontal scroll bars). This will be your base CSS. Then, after you have it looking good at the narrow width you can widen your browser until you feel you have enough room to rearrange elements for the wider view port and add your media query break point there. Use min-width and em units for the break point.

A few suggestions, don’t set widths on elements using px. Use em (or rem) if you need to set a width (or more likely, max-width) so that the width can grow as the font size is increased. Likewise, don’t set heights on elements, they should grow taller as needed. For the special case in which a height is appropriate, it should be in em (or rem), definitely not px.

To be honest, with a layout this simple you probably do not need any break points to make this responsive if you use max-width appropriately.

5

hi. i just updated my survey page in which i worked on the responsiveness which i didn’t understand .,notuntil now . i will like you to check it out and give it your rating and whatsoever you find as a mistake, it will be nice that you call my attention to it. the link: https://codepen.io/willy032/pen/yLXyJBy. thanks

6

I’m getting a horizontal scroll bar when I narrow my browser all the way in. I think you might want to use max-width instead of width on some elements.

Also, do not use <br> to create vertical space between elements. There are a very limited number of uses for <br> and this is not one of them.

1 Like
7

okay. thanks. i really appreciate your time

8

i have just worked on it. would you be so nice to recheck?https://codepen.io/willy032/pen/yLXyJBy thanks

9

I’m still getting a horizontal scroll bar when I narrow my browser all the way in. Are you not able to narrow your browser to do the same test? Also, why don’t you take my hint and use max-width instead of width?

10

Thanks. I’ve gotten it now.

11

Style tags are html tags and do not belong in your css.

I would get rid of them.

12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.