Position text below a fixed div that grows in height with page width change

Position text below a fixed div that grows in height with page width change
0

#1

I reviewed your topic on Position a div below a fixed div and it functioned as I needed (almost). When I shrink the page the header overlaps my text. I want the text to stay below the header when it grows in height. Below is my php file.
Test.php

<html>
<script>
	$(".text").css("top", $(".title").height() + 10);

	$(window).on("resize", function() { //Make it responsive
	  $(".text").css("top", $(".title").height() + 10);
	});
</script>

<style>
	ul {list-style-type: none;}
	
	a:link,a:visited{color:blue;text-decoration:none;
	-webkit-border-radius: 15px;-moz-border-radius: 15px;
	border-radius: 15px; padding: 10px;}

	a:link.noborder,a:visited.noborder{
	text-decoration:none;}

	a:hover,a:active{background-color:#F7881D;
	color:#ffffff;text-decoration:none;}

	a:hover.noborder,a:active.noborder{
	background-color:transparent;}
	
	html,
	body {
	  height: 500%;
	  width: 100%;
	}

	.container {
	  width: 100%;
	  margin: 0 auto;
	  max-width: 700px;
	}
	.title-wrapper {
	  width: 100%;
	  position: fixed;
	  z-index: 2;

	  /*     higher z-index so it's always in front of text. */
	  top: 0;
	  /* top 0 to cover empty space above it   */
	  background-color: white;
	  /*  white background to hide elements behind it  */
	}
	.title {
	  width: 100%;
	  max-width: 100%;
	}
	.image { margin-top: 10px;
	  width: 100%;
	}
	.image img {
	  width: 100%;
	  height: 100px;
	}
	.text {margin-top: 60px;
	  text-align: center;
	  position: absolute;
	  width: 100%;
	  max-width: 900px;
	}
	h2 {
	  text-align: center;
	  background-color: grey;
	  width: 100%;
	}
	h3 {
	  text-align: center;
	  background-color: green;
	  width: 100%;
	  max-width: 900px;
	}

</style>
<body>
<div class="container">
	<div class="title-wrapper">
		<div class="title">
			<div class="image">
				<!--img src="https://images.pexels.com/photos/47044/aircraft-landing-reach-injection-47044.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" alt="Plane1"-->
			<span style="color:orange; font-size: 24px; font-weight: bold;">       
			<?php 
				//if (isset($WeekDay)) { 
					$WeekDay = $_GET["WeekDay"];
					$dayName = "All";
					if ($WeekDay=='Sun') $dayName = "Sunday";
					if ($WeekDay=='Mon') $dayName = "Monday";
					if ($WeekDay=='Tue') $dayName = "Tuesday";
					if ($WeekDay=='Wed') $dayName = "Wednesday";
					if ($WeekDay=='Thu') $dayName = "Thursday";
					if ($WeekDay=='Fri') $dayName = "Friday";
					if ($WeekDay=='Sat') $dayName = "Saturday";
					if ($WeekDay=='All') $dayName = "All";
				//} else {
				//    $dayName = "All"; 
				//}
			?>
			<b>
			Viewing -&nbsp;<?php echo $dayName ?>&nbsp;-&nbsp; 
			Find a Place to visit on: 
			</b>
			<br/>
				   <a href="Title.php?WeekDay=Sun">Sunday</a>
				   <a href="Title.php?WeekDay=Mon">Monday</a>
				   <a href="Title.php?WeekDay=Tue">Tuesday</a>
				   <a href="Title.php?WeekDay=Wed">Wednesday</a>
				   <a href="Title.php?WeekDay=Thu">Thursday</a>
				   <a href="Title.php?WeekDay=Fri">Friday</a>
				   <a href="Title.php?WeekDay=Sat">Saturday</a>
				   <a href="Title.php?WeekDay=All">View All</a>
				 </span><br/>
								
							</div>

						</div>
					</div>
					
					<div class="text">
						<div>
							<h3>TEXT 1</h3>
							<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium veniam consequuntur libero? Explicabo consectetur rerum odit? Qui ea dolore culpa. Provident, exercitationem reiciendis voluptatum nulla quo nihil iste? Non doloremque officia ex dicta, ea molestias corporis. Quisquam, tenetur! Consequatur totam quaerat ullam incidunt quas nostrum expedita, quidem iste tempora est blanditiis corrupti sunt id! Esse necessitatibus non harum, ad quisquam unde, eius placeat est explicabo ex repudiandae suscipit, ipsum tempora a quibusdam </p>
						</div>
					</div>

				</div>
    </body>
</html>

#2

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#3

I am not understanding the problem you are experiencing. Can you post a screenshot showing the undesired overlapping?