How to make my survey form responsive? (second project)

HTML-CSS
1

Tell us what’s happening:
So I have three problems here.

  1. I am having trouble with making my survey form page responsive.
  2. The other problem is, I want only the “form” container to be able to scroll, not the background image. I’ve tried methods like applying “overflow-y: scroll” to the form container but it is not working.
  3. I also would like to make the background image transparent by applying opacity. When I apply opacity to the background image, all the other parts of the form container gets transparent as well, which is not the result I want. Which part of my code should I change?

Your code so far
https://codepen.io/darkhijav-mendbayar/pen/poEoqQG

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36.

Challenge: Build a Survey Form

Link to the challenge:

1 Like
2

@Dar99
I understand you here…I had same problem in this project.
Here are some points you should try in your code.

  1. You don’t need those tags like <!DOCTYPE html>, <html>, <style> in codepen
  2. you should apply background image’s position to be fixed so that it won’t scroll.
  3. You should do some searching through stackoverflow click here to learn to decrease the opacity of the background color without affecting the children as there are many ways to do that.
  4. As for the responsiveness, you should use media query for different width of the display and make the contents easy to read, understand and interact by the user.

Click Here to learn to decrease opacity of background image without affecting the children elements.

`

4

Add all the other elements inside that element and use position: fixed; to the psuedo element of the element

5

For the image, remove the height on the image and add background-attachment: fixed;

You also have to remove the default margin on the body and the top margin on the <h1> to get rid of all the white space. You can use the browser dev tools to inspect elements.

On the form, you can use max-width and auto margin.

.container {
  background-color: white;
  max-width: 650px;
  margin: auto;
  padding: 16px;
}

If you want to have the form not extend out to the edge on small screens you can add padding to its parent container.

Also, do not use a fixed pixel width on the elements inside the form. Again, you can use max-width, or a relative unit on the width like percentages.

BTW. You have CSS both in the HTML and in the CSS. Remove the CSS from the HTML, then remove the <style></style> element from the CSS.