Survey form feedback, please

Code Feedback
1

All opinions welcome.

image
image1920Ă—1080 355 KB

2

Hey there! Just an FYI, it makes it a lot easier to look over your page and code if you post a link, rather than an image of it.


One small suggestion, on your img, change either the height or the width to “auto”(change the least important variable) and your image will resize based on the set variable and the auto variable will change to retain the same aspect ratio. This helps to keep Pup Fu from getting all stretched out in one direction or the other, on different screen sizes.

Good luck!:slight_smile:

3

Hey, Jerami. Unfortunately the forum won’t let me post any links yet. Says my account is too recent. Thanks for the suggestion.

1 Like
4

It seems your form doesn’t pass the 10. test, but you probably know how to fix that as you used id’s correctly elsewhere! You’ve also got a mistake there that I personally do all the time (can’t seem to break the habit!): <h1></h2> for your title. :slight_smile:

Generally, though, I like how responsive it is, that the page isn’t too wide so it’s very easy to read, and the content is fun too. (Power Paw:D I love it.)

5

Thanks, ynne. I added the required ids for the labels, but didn’t want to add text, so can’t pass the test. Guess I’ll have to see if they’ll give me a pass on it. I will definitely fix that though.

6

Idea: you could add the label text and then hide it with CSS? If I understood it correctly and you just don’t want it there for aesthetic purposes. :slight_smile:

7

No problem. I wasn’t sure if you could post links yet, that’s why I posted it for you.

The only reason I mentions retaining aspect ratio is because Pup Fu was getting a little wonky on smaller screen sizes. One quick way you can test this without having multiple devices, in codepen, is to use the zoom feature of your browser(ctrl+/-) and resizing the browser window. If you zoom in a lot, it will state the pixel width of the page display window on every zoom. I usually zoom to less than 600px wide to show what it would look like on a “low to mid tier” phone.

:slight_smile:

8

Hide it with CSS? How?

9

Using this method, you could do something like:

<label id="name-label" for="name"><span class="hidden">Name</span></label>

.hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  border: 0;
}
10

I’d never considered making my container too small for the text, and now I know there’s such thing as an overflow property.

You are my new best friend!

1 Like
11