Survey Form project: Feedback Needed

Code Feedback
1

Finished my Survey Form project. Useful, honest and even harsh criticisms are welcome.
Here is the link:


Thank you.

2

Not much to improve.

I love your approach.

One simple ‘doh’ would be using the script within codepen. It would probably function correctly as is, but you are loading it with the settings also.
Remove this from CodePen HTML to fix a small glitch.

<script src="https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js"></script>

I don’t like that the background isn’t always fixed. When scrolling it leaves the frame.

Adjust your html to include a div tag with the class ‘background’
Optionally remove the body tag all together as :root will do the same thing.

<!-- remove this
<body>
 -->
<div class="background">
<!--  Rest of your code to go here -->
</div>
<!-- remove this
</body
> -->

Then modify your CSS.

:root {
  --main-body-width: calc( 260px + (100vw - 320px) * ((585 - 260) / (1366 - 320)));
  line-height:1.4rem;
}
.background {
  background: url("https://res.cloudinary.com/ujjwal1604/image/upload/q_auto/survey-form/table_top.jpg") no-repeat;
  padding-top:2em; 
  background-size: cover;
  background-position: center; 
  background-attachment: fixed;

}

I hope this helps. Great job.

1 Like
3

Hey, thank you for your feedback. But I didn’t follow the problem you pointed out. Actually the background image looks fixed to me. It is not leaving the frame while scrolling. The background attachment property which is set to fixed should take care of this, right? Anyway I did the editing you advised, but both the results, before and after editing, looks quite similar to me except that now there is a little white colored area appearing at the top of the page not sure why.
Am I missing something or may be this is related to the browser or platform I am using. By the way I am using Firefox and Chrome latest version in Windows OS.
This is how the page is appearing in my laptop.

Before Editing- The original page I wrote:

before%20editing

After Editing a/c your advice:

after%20editing

I hope that you will be able to give me an insight of what exactly is happening. Thank you once again.

4

I just finished my portfolio project. Just stop by to say that… I like the color :smiley:

5

No worries happy to provide feedback.

The background appears to be working fine. On my end it would scroll apart halfway down yesterday.
Using the same browsers I was yesterday, Chrome and Edge, it does not do it today. I can’t seem to replicate it either. I wonder if I saw it on another computer. Will update if I find anything.

To get rid of that white area, use

.background{
padding-top:1em;
}
1 Like
6

I can’t take a video for you like you provided me with, but I can confirm that on my work computer, using Windows 7 with Chrome. I am able to see the background scroll away as reported yesterday.

Not on your most recently saved version.
When I revert your code to how I remembered it being yesterday I can yield the same result.

Don’t know if it is a browser or computer, possibly even a screen size issue.

1 Like