Avoid background shape to move when scaling up-down screen

Hi,
Does anybody know how to avoid a background shape to move when scaling screens? Theres no way I can find the right solution. The image show starting position.


Whether you scale the screen up/downn mess arises!

Document
<style type="text/css">

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		font-family: 'Nunito Sans', sans-serif;
		font-weight: 400;
		font-size: 0.9rem;
	}

	h1 {
		font-family: 'Nunito Sans', sans-serif;
		font-weight: 600;
		color: #99004d;
	}

	h2 {
		font-family: 'Nunito Sans', sans-serif;
		font-size: 1.7rem;
		font-weight: 200;
		line-height: 1;
		position: relative;
	}

	body, form, #recommend, #dropdown, #dropdown1, #Favs {
		display: flex;
		flex-direction: column;
	}

	body {
		background-color: #E8E8E8;
		font-size: 1.2rem;
		margin-bottom: 4rem;
		margin-top: ;

	}

	#name, #email, #number, #dropdown, #dropdown1, #recommend, #Favs, textarea {
		margin-bottom: 1rem;
		padding-bottom: .3rem;
	}

	.one, .two, .three {
		margin-bottom: .2rem;
	}

	form {
		padding:4rem;
		background-color: #b3b3b3;
		border-bottom-right-radius: 4%;
		border-bottom-left-radius: 4%;
		padding-top: 2.3rem;
		margin-bottom: 3rem;
		width: 50%;
		margin: 3rem auto 0 auto;
		z-index: 3;
		
	}

	input {
		line-height: 1.5rem;
		padding-left: 1.2rem;
		border: 3px solid #b3b3b3;
		border-radius: 5px;
	}

	select {
		padding: .3rem .8rem;
	}

	button {
		padding: .5rem 1rem;
		width: 80%;
		align-self: center;
		background-color: #99004d;
		color: white;
		border: #99004d;
	}

	.bodyf {
		display: flex;
		flex-direction: column;
		padding: .7rem 2rem 2rem 2rem;
		background: #A0A0A0;
		color: #202020;
		border-bottom-right-radius: 4%;
		border-bottom-left-radius: 4%;
	}

	.shape {
 		display: block;
  		/*
  		width: 1260px;
  		height: 1800px;*/
  		width: 86%;
  		height: 200%;
  		max-width:;
  		background-color: #99004d;
  		border-radius: 50% 50% 50% 50% /50% 50% 50% 50%;
  		overflow: hidden;
  		position: absolute;
  		z-index: 2;
  		margin-top: -90%;
  		position: fixed;
  	}

</style>
<form action="" id="survey-form">
	
	<div class="hyt">
		<h1 id="title">Survey Form</h1>
		
	</div>

	<div class="bodyf">

		<h2 id="description"><span>Please help us improving the platform</span></h2>
	

		<label id="name-label" for="name">Name</label>
		<input id="name" type="text" placeholder="Enter your name" required>
		
		<label id="email-label" for="email">Email</label>
		<input id="email" type="email" placeholder="Enter your email" required>
		
		<label id="number-label" for="number">Age</label>
		<input id="number" type="number" placeholder="Enter your age" min="10" max="120" pattern="\d+" required>

		<div id="dropdown">
		<label class="one">Which option best describes your current situation?</label>
			<select>
				<option class="option" value="selected">Select an option</option>
				<option>Student</option>
				<option>Worker</option>
				<option>Time traveller</option>
				<option>On a mission</option>
				<option>Storyteller</option>
				<option>Full time lover</option>
				<option>Freecodecamp enthusiast</option>
				<option>All the above</option>
			</select>
		</div>

		
		<div id="recommend">
		<label>Would you recommend freeCodeCamp to a friend?</label>
			<label for="Definitely">
	  				<input id="Definitely" value="Definitely" type="radio" name="Recommend">Definitely</label>
			<label for="Maybe">
					<input id="Maybe" value="Maybe" type="radio" name="Recommend">Yes</label>
			<label for="Not sure">
					<input id="Not sure" value="Not sure" type="radio" name="Recommend">100%</label>
		</div>

		
		<div id="dropdown1">
		<label class="two">What is your favourite feature of freeCodeCamp?</label>
			<select>
				<option class="option" value="selected">Select an option</option>
				<option>Lessons flow</option>
				<option>Challenges</option>
				<option>Community</option>
				<option>Open Source</option>
				<option>Projects</option>
				<option>Resources</option>
			</select>
		</div>

		<div id="Favs">
		<label>What would you like to see improved?</label>
			<label for="Front-end Projects">
	  				<input id="Front-end Projects" value="Front-end Projects" type="checkbox" name="Favs">Front-end Projects</label>
			<label for="Back-end Projects">
					<input id="Back-end Projects" value="Back-end Projects" type="checkbox" name="Favs">Back-end Projects</label>
			<label for="Data Visualization">
					<input id="Data Visualization" value="Data Visualization" type="checkbox" name="favs">Data Visualization</label>
		</div>

		<label class="three" for="story">Any coments or suggestions?</label>

			<textarea id="textarea" name="textarea"
          	rows="5" cols="33" placeholder="Spread the love"></textarea>

		<button id="submit">Submit</button>
	</div>
</form>

<div class="shape"></div>

Quite simply you shouldn’t use a % to set the element’s width and height. It will always resize dynamically as you change the width/height.

You can add a min-width and min-height, or you can use clamp.

Or you can just use a static size, like the code you have commented-out. Why did you think that % would be better to use than simply declaring this in px?

1 Like

Hi Grizhlie thank you for replying.
I initially used pixels and it did not work. Then I used % to try another solution that somebody else did on an a similar case and it did not work either.
Figuring out now how to fit clamp and min within the code above so .shape keeps it shape

Do you want the shape to get smaller/bigger but maintain its’ shape?

1 Like

See if this is what you’re looking for. Just wrote it up, barely remembered about this technique hehe.

1 Like

You are star Grizhlie.
You see how the shape is actually placed at the top of the survey right? The idea is to place the purple shape behind “survey form”. Its like if you could see purple shape color through “survey form” writing.
I’m not trying to center it, perhaps it could be ok. Rather, Im trying to place it in many different ways. The only requirement is that purple is right behind “Survey form”.
Its funny that I am stuck just at the beggining…

Yes, it has to maintain its shape so is always as mentioned above.
Going through your example…

Beginning is where we all get stuck the most so that makes sense. In a way it’s a pleasant type of frustration as you do progress every time you get stuck.

As for positioning you can position this to your hearts content. The way you did it is probably the best way (position: absolute).

I have updated this, check if this is what you’re looking for. Initially I was just focused on helping you with the shape having more structure and not losing the overall ‘shape’, I didn’t really think of the positioning. Now the codepen models the behaviour you’re looking for I hope?

Perhaps I’m misunderstanding something, either way - let me know.

1 Like

Grizhlie!
Apologies for a late reply. Thank you for taking the time.

Yes it’s pleasant the way you mention, and I am somehow getting hooked with this sort of ‘lost & found’ coding experience of mine.

It does work keeping shape placed as desired. Shape’ can be modified, is not that it has to be a very specific one although now the mix is helping me learn better.
You did also hit a target of mine towards the logic used on video containers. I recently started a portfolio where Im trying to showcase photo-footage I have worked on the advertising industry until March 2020. Trying to mix both gave me lots of problems to align them because of different ratios: footage - 2.39:1, 1.85:1, 16:9 – stills - 4:3, 3:2, 1:1. Im sure you do imagine the headaches I am going through to keep them aligned keeping their shape, here they really have to keep their shape.
What you just said is driving me on the good direction.

Im going through the logic you are showing so I can finish this assignement nicely.
Letting you know final thoughts when finished

You are not misunderstanding a bit!
:slightly_smiling_face: :slightly_smiling_face: :slightly_smiling_face: :orange_heart:

So finally, you provided me with the solution, which is at the same time the solution to my current portfolio that I will modify pretty soon and will show you guys here.

Just in case somebody is up to review what I just did, the pen for my freecodecamp assignment is here: https://codepen.io/pedro-alerri/pen/LYWroYZ

Gracias Grizhlie!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.