Tell us what’s happening:
So I have three problems here.
I am having trouble with making my survey form page responsive.
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.
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
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:
Learn to code. Build projects. Earn certifications.Since 2015, 40,000 graduates have gotten jobs at tech companies including Google, Apple, Amazon, and Microsoft.
I understand you here…I had same problem in this project.
Here are some points you should try in your code.
You don’t need those tags like
<!DOCTYPE html>, <html>, <style> in codepen
you should apply background image’s position to be fixed so that it won’t scroll.
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. 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.
Add all the other elements inside that element and use
position: fixed; to the psuedo element of the element
For the image, remove the height on the image and add
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.
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.