Restaurant-Survey Form

A comparison between with the viewport meta and without:
Without it:

With it:

And of course, you can still scroll down.

1 Like

On dropdown, to get same width you can set it to 315px. To get background white, background-color: white.

@Steffan153 Thanks again for your guideline. I insert the viewport meta tag. It really makes the difference.

1 Like

If you ever need to see what something looks like on mobile, I can send you a screenshot or screen record.

@Steffan153 Thanks. I appreciate it and I will surely ask you if I need it.

1 Like

Here’s a short vid I made on testing a pen on mobile (no real phone required, this only simulates it):


@Steffan153 It’s a nice way to check the application or web page. I like it and I will try to use it.

@Steffan153 I want to change the background color of radio buttons and checkbox using the following code:
.radio, input [type=“checkbox”]
But it’s not working. Do you have another suggetions for it?

You can’t customize radio / checkbox buttons easily. It requires fairly complex code, try googling and you’ll see the complicated code. Also, it will probably require having two elements for just one checkbox. The first one will be the real checkbox that will be hidden, and the second one will have something to do with making a custom checkbox.

@Steffan153 Sure, I will check it and try to implement it. Thanks for the guideline.

1 Like

Actually, since you have labels for the checkboxes, it shouldn’t require many adjustments to the HTML. You could try hacking on this pen:

I just noticed a typo in the html, it is opening the label tag and then the closing tag is missing a /.

1 Like

@Steffan153 I tried to check the typo in html code in the checkbox section. But I didn’t get it. Can you please mention the line number or value of that checkbox?

On line 32 in HTML, it should be </label> instead of <label>.

@Steffan153 Thank you. I just closed the tag. I was looking into checkbox so I didn’t get it.

I could’t find many nice checkboxes, and it’s actually good to be simple & boring (no recreating checkboxes / radio buttons / select boxes to make them look nice, etc.). Because then you spend hours just trying to make something look nice, it’s better to just use what the browser gives you. Also, with the browser’s built-in elements it comes with accessibility etc. out of the box.

Well done. Looks nice. I ran the html analyzer and there’s some attributes missing for the text area.

@shwetapatel3591 Here is a tip. Steffan153 showed you how to view the website in mobile view in the dev tools.As a challenge, I suggest trying to start a project at that size (the smallest iPhone 5) and expand outwards adding media queries where the design breaks. You will have to use

 @media (min-width: ??px) {
  /* code */
1 Like

@ericlyv Thank you. I will look into it. Actually, I know about that analyzer attributes missing but I don’t need it. Though I try to solve that issue.

@brandon_wallace I am not sure but I think it is as following:

@media (min-width:320px)

Please give your response to it. And again thanks for your suggestions.

1 Like