css positioning i am having a problem with positioning












0















i am new to web development, I have a small problem with positioning i placed a


element with content in it all of the word are grumble up instead of be in one line . can anyone help me with a solution. positioning has been a big problem for me so far so if you guys know any sources where i can learn more about css positioning 






@import url('https://fonts.googleapis.com/css?family=Yantramanav:100');

@import url('https://fonts.googleapis.com/css?family=Montserrat:400');

@import url('https://fonts.googleapis.com/css?family=Poiret+One');



html, body {

	margin: 0;

	padding: 0;

	height: 100%;

	width: 100%;

}

.intro {

	height: 100%;

	width: 100%;

	margin: auto;

	display: table;

	top: 0;

	background-size: cover;

	background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;

}

.intro .inner{

	display: table-cell;

	vertical-align: middle;

	width: 100%;

	max-width: none;

}

.content {

	max-width: 600px;

	margin: 0 auto;

	text-align: center;

}

.content h1 {

	font-family: "Yantramana";

	font-size: 600%;

	font-weight: 100;

	color: #E1EFE9;

	line-height: 70%;

}

.btn{

	font-family: "montserrat";

	font-size: 135%;

	font-weight: 400;

	color: orange;

	text-transform: uppercase;

	text-decoration: none;

	border: solid #ffffff;

	padding: 10px 20px;

	border-radius: 9px;

	transition: all 0.7s;

}

.btn:hover {

	color: #CBDFD6;

	border: solid #CBDFD6;



}

.about-us{

	height:100%;

	width: 100%;

	margin: auto;

	display: table;

	background-color: #ffffff;

	background-size: cover;

	position: relative;

}

.ab-content {

	font-family: "Poiret One";

	font-weight: lighter;

	position: absolute;

	font-size: 150%;

	left: 50%;

	transform: translateX(-50%);

}

.ab-p{

	position: absolute;

	top: 10%;

	left: 50%;

	font-weight: lighter;

	transform: translateX(-50%);

	font-family: "montserrat";

}



.color {

	color:orange;

}

/*--- Media Queries --*/

@media screen and (max-width: 900px) {



}

@media screen and (max-width: 768px) {



}

@media screen and (max-width: 480px) {

	

}

<!DOCTYPE html>

<html>    

<head>

	<title>Full Screen Landing Page</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" type="text/css" href="style.css">

	<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

  	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

  	<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

	<link href="css/animate.css" rel="stylesheet"/>

	<link href="css/waypoints.css" rel="stylesheet"/>

	<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>

	<script src="js/waypoints.js" type="text/javascript"></script>

</head>

<body>

	<section class="intro">

		<div class="inner">

			<div class="content">

				<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">

					<h1>Find <span class="color">Your</span> Taste!</h1>

				</section>

				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">

					<a class="btn" href="#">Get Started</a>

			</div>

		</div>

	</section>

	<section class="about-us">

		<div class="ab-inner">

			<div class="ab-content">

				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">

					<h2 class="center">Our Mission</h2>

					<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">

						<p class="ab-p">Our mission is to provide the best food ingedients.</p>

			</div>

		</div>

	</section>

</body>

</html>








javascript html css







share|improve this question




















  • 1





    Your content class is 600px in width and the text and font size of your text is big therefore it will break into a new line if the content is bigger than the width. Increase the width or reduce the font size and the text will be in a single line

    – Julian Espinosa
    Nov 20 '18 at 19:44






  • 2





    You should read about position: absolute and what it actually does. It is almost certainly the wrong thing to be using here.

    – Turnip
    Nov 20 '18 at 19:47
















0















i am new to web development, I have a small problem with positioning i placed a


element with content in it all of the word are grumble up instead of be in one line . can anyone help me with a solution. positioning has been a big problem for me so far so if you guys know any sources where i can learn more about css positioning 






@import url('https://fonts.googleapis.com/css?family=Yantramanav:100');

@import url('https://fonts.googleapis.com/css?family=Montserrat:400');

@import url('https://fonts.googleapis.com/css?family=Poiret+One');



html, body {

	margin: 0;

	padding: 0;

	height: 100%;

	width: 100%;

}

.intro {

	height: 100%;

	width: 100%;

	margin: auto;

	display: table;

	top: 0;

	background-size: cover;

	background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;

}

.intro .inner{

	display: table-cell;

	vertical-align: middle;

	width: 100%;

	max-width: none;

}

.content {

	max-width: 600px;

	margin: 0 auto;

	text-align: center;

}

.content h1 {

	font-family: "Yantramana";

	font-size: 600%;

	font-weight: 100;

	color: #E1EFE9;

	line-height: 70%;

}

.btn{

	font-family: "montserrat";

	font-size: 135%;

	font-weight: 400;

	color: orange;

	text-transform: uppercase;

	text-decoration: none;

	border: solid #ffffff;

	padding: 10px 20px;

	border-radius: 9px;

	transition: all 0.7s;

}

.btn:hover {

	color: #CBDFD6;

	border: solid #CBDFD6;



}

.about-us{

	height:100%;

	width: 100%;

	margin: auto;

	display: table;

	background-color: #ffffff;

	background-size: cover;

	position: relative;

}

.ab-content {

	font-family: "Poiret One";

	font-weight: lighter;

	position: absolute;

	font-size: 150%;

	left: 50%;

	transform: translateX(-50%);

}

.ab-p{

	position: absolute;

	top: 10%;

	left: 50%;

	font-weight: lighter;

	transform: translateX(-50%);

	font-family: "montserrat";

}



.color {

	color:orange;

}

/*--- Media Queries --*/

@media screen and (max-width: 900px) {



}

@media screen and (max-width: 768px) {



}

@media screen and (max-width: 480px) {

	

}

<!DOCTYPE html>

<html>    

<head>

	<title>Full Screen Landing Page</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" type="text/css" href="style.css">

	<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

  	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

  	<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

	<link href="css/animate.css" rel="stylesheet"/>

	<link href="css/waypoints.css" rel="stylesheet"/>

	<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>

	<script src="js/waypoints.js" type="text/javascript"></script>

</head>

<body>

	<section class="intro">

		<div class="inner">

			<div class="content">

				<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">

					<h1>Find <span class="color">Your</span> Taste!</h1>

				</section>

				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">

					<a class="btn" href="#">Get Started</a>

			</div>

		</div>

	</section>

	<section class="about-us">

		<div class="ab-inner">

			<div class="ab-content">

				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">

					<h2 class="center">Our Mission</h2>

					<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">

						<p class="ab-p">Our mission is to provide the best food ingedients.</p>

			</div>

		</div>

	</section>

</body>

</html>








javascript html css







share|improve this question




















  • 1





    Your content class is 600px in width and the text and font size of your text is big therefore it will break into a new line if the content is bigger than the width. Increase the width or reduce the font size and the text will be in a single line

    – Julian Espinosa
    Nov 20 '18 at 19:44






  • 2





    You should read about position: absolute and what it actually does. It is almost certainly the wrong thing to be using here.

    – Turnip
    Nov 20 '18 at 19:47














0












0








0








i am new to web development, I have a small problem with positioning i placed a


element with content in it all of the word are grumble up instead of be in one line . can anyone help me with a solution. positioning has been a big problem for me so far so if you guys know any sources where i can learn more about css positioning 






@import url('https://fonts.googleapis.com/css?family=Yantramanav:100');

@import url('https://fonts.googleapis.com/css?family=Montserrat:400');

@import url('https://fonts.googleapis.com/css?family=Poiret+One');



html, body {

	margin: 0;

	padding: 0;

	height: 100%;

	width: 100%;

}

.intro {

	height: 100%;

	width: 100%;

	margin: auto;

	display: table;

	top: 0;

	background-size: cover;

	background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;

}

.intro .inner{

	display: table-cell;

	vertical-align: middle;

	width: 100%;

	max-width: none;

}

.content {

	max-width: 600px;

	margin: 0 auto;

	text-align: center;

}

.content h1 {

	font-family: "Yantramana";

	font-size: 600%;

	font-weight: 100;

	color: #E1EFE9;

	line-height: 70%;

}

.btn{

	font-family: "montserrat";

	font-size: 135%;

	font-weight: 400;

	color: orange;

	text-transform: uppercase;

	text-decoration: none;

	border: solid #ffffff;

	padding: 10px 20px;

	border-radius: 9px;

	transition: all 0.7s;

}

.btn:hover {

	color: #CBDFD6;

	border: solid #CBDFD6;



}

.about-us{

	height:100%;

	width: 100%;

	margin: auto;

	display: table;

	background-color: #ffffff;

	background-size: cover;

	position: relative;

}

.ab-content {

	font-family: "Poiret One";

	font-weight: lighter;

	position: absolute;

	font-size: 150%;

	left: 50%;

	transform: translateX(-50%);

}

.ab-p{

	position: absolute;

	top: 10%;

	left: 50%;

	font-weight: lighter;

	transform: translateX(-50%);

	font-family: "montserrat";

}



.color {

	color:orange;

}

/*--- Media Queries --*/

@media screen and (max-width: 900px) {



}

@media screen and (max-width: 768px) {



}

@media screen and (max-width: 480px) {

	

}

<!DOCTYPE html>

<html>    

<head>

	<title>Full Screen Landing Page</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" type="text/css" href="style.css">

	<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

  	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

  	<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

	<link href="css/animate.css" rel="stylesheet"/>

	<link href="css/waypoints.css" rel="stylesheet"/>

	<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>

	<script src="js/waypoints.js" type="text/javascript"></script>

</head>

<body>

	<section class="intro">

		<div class="inner">

			<div class="content">

				<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">

					<h1>Find <span class="color">Your</span> Taste!</h1>

				</section>

				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">

					<a class="btn" href="#">Get Started</a>

			</div>

		</div>

	</section>

	<section class="about-us">

		<div class="ab-inner">

			<div class="ab-content">

				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">

					<h2 class="center">Our Mission</h2>

					<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">

						<p class="ab-p">Our mission is to provide the best food ingedients.</p>

			</div>

		</div>

	</section>

</body>

</html>








javascript html css







share|improve this question
















i am new to web development, I have a small problem with positioning i placed a


element with content in it all of the word are grumble up instead of be in one line . can anyone help me with a solution. positioning has been a big problem for me so far so if you guys know any sources where i can learn more about css positioning 






@import url('https://fonts.googleapis.com/css?family=Yantramanav:100');

@import url('https://fonts.googleapis.com/css?family=Montserrat:400');

@import url('https://fonts.googleapis.com/css?family=Poiret+One');



html, body {

	margin: 0;

	padding: 0;

	height: 100%;

	width: 100%;

}

.intro {

	height: 100%;

	width: 100%;

	margin: auto;

	display: table;

	top: 0;

	background-size: cover;

	background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;

}

.intro .inner{

	display: table-cell;

	vertical-align: middle;

	width: 100%;

	max-width: none;

}

.content {

	max-width: 600px;

	margin: 0 auto;

	text-align: center;

}

.content h1 {

	font-family: "Yantramana";

	font-size: 600%;

	font-weight: 100;

	color: #E1EFE9;

	line-height: 70%;

}

.btn{

	font-family: "montserrat";

	font-size: 135%;

	font-weight: 400;

	color: orange;

	text-transform: uppercase;

	text-decoration: none;

	border: solid #ffffff;

	padding: 10px 20px;

	border-radius: 9px;

	transition: all 0.7s;

}

.btn:hover {

	color: #CBDFD6;

	border: solid #CBDFD6;



}

.about-us{

	height:100%;

	width: 100%;

	margin: auto;

	display: table;

	background-color: #ffffff;

	background-size: cover;

	position: relative;

}

.ab-content {

	font-family: "Poiret One";

	font-weight: lighter;

	position: absolute;

	font-size: 150%;

	left: 50%;

	transform: translateX(-50%);

}

.ab-p{

	position: absolute;

	top: 10%;

	left: 50%;

	font-weight: lighter;

	transform: translateX(-50%);

	font-family: "montserrat";

}



.color {

	color:orange;

}

/*--- Media Queries --*/

@media screen and (max-width: 900px) {



}

@media screen and (max-width: 768px) {



}

@media screen and (max-width: 480px) {

	

}

<!DOCTYPE html>

<html>    

<head>

	<title>Full Screen Landing Page</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" type="text/css" href="style.css">

	<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

  	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

  	<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

	<link href="css/animate.css" rel="stylesheet"/>

	<link href="css/waypoints.css" rel="stylesheet"/>

	<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>

	<script src="js/waypoints.js" type="text/javascript"></script>

</head>

<body>

	<section class="intro">

		<div class="inner">

			<div class="content">

				<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">

					<h1>Find <span class="color">Your</span> Taste!</h1>

				</section>

				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">

					<a class="btn" href="#">Get Started</a>

			</div>

		</div>

	</section>

	<section class="about-us">

		<div class="ab-inner">

			<div class="ab-content">

				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">

					<h2 class="center">Our Mission</h2>

					<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">

						<p class="ab-p">Our mission is to provide the best food ingedients.</p>

			</div>

		</div>

	</section>

</body>

</html>








@import url('https://fonts.googleapis.com/css?family=Yantramanav:100');

@import url('https://fonts.googleapis.com/css?family=Montserrat:400');

@import url('https://fonts.googleapis.com/css?family=Poiret+One');



html, body {

	margin: 0;

	padding: 0;

	height: 100%;

	width: 100%;

}

.intro {

	height: 100%;

	width: 100%;

	margin: auto;

	display: table;

	top: 0;

	background-size: cover;

	background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;

}

.intro .inner{

	display: table-cell;

	vertical-align: middle;

	width: 100%;

	max-width: none;

}

.content {

	max-width: 600px;

	margin: 0 auto;

	text-align: center;

}

.content h1 {

	font-family: "Yantramana";

	font-size: 600%;

	font-weight: 100;

	color: #E1EFE9;

	line-height: 70%;

}

.btn{

	font-family: "montserrat";

	font-size: 135%;

	font-weight: 400;

	color: orange;

	text-transform: uppercase;

	text-decoration: none;

	border: solid #ffffff;

	padding: 10px 20px;

	border-radius: 9px;

	transition: all 0.7s;

}

.btn:hover {

	color: #CBDFD6;

	border: solid #CBDFD6;



}

.about-us{

	height:100%;

	width: 100%;

	margin: auto;

	display: table;

	background-color: #ffffff;

	background-size: cover;

	position: relative;

}

.ab-content {

	font-family: "Poiret One";

	font-weight: lighter;

	position: absolute;

	font-size: 150%;

	left: 50%;

	transform: translateX(-50%);

}

.ab-p{

	position: absolute;

	top: 10%;

	left: 50%;

	font-weight: lighter;

	transform: translateX(-50%);

	font-family: "montserrat";

}



.color {

	color:orange;

}

/*--- Media Queries --*/

@media screen and (max-width: 900px) {



}

@media screen and (max-width: 768px) {



}

@media screen and (max-width: 480px) {

	

}

<!DOCTYPE html>

<html>    

<head>

	<title>Full Screen Landing Page</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" type="text/css" href="style.css">

	<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

  	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

  	<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

	<link href="css/animate.css" rel="stylesheet"/>

	<link href="css/waypoints.css" rel="stylesheet"/>

	<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>

	<script src="js/waypoints.js" type="text/javascript"></script>

</head>

<body>

	<section class="intro">

		<div class="inner">

			<div class="content">

				<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">

					<h1>Find <span class="color">Your</span> Taste!</h1>

				</section>

				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">

					<a class="btn" href="#">Get Started</a>

			</div>

		</div>

	</section>

	<section class="about-us">

		<div class="ab-inner">

			<div class="ab-content">

				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">

					<h2 class="center">Our Mission</h2>

					<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">

						<p class="ab-p">Our mission is to provide the best food ingedients.</p>

			</div>

		</div>

	</section>

</body>

</html>





@import url('https://fonts.googleapis.com/css?family=Yantramanav:100');

@import url('https://fonts.googleapis.com/css?family=Montserrat:400');

@import url('https://fonts.googleapis.com/css?family=Poiret+One');



html, body {

	margin: 0;

	padding: 0;

	height: 100%;

	width: 100%;

}

.intro {

	height: 100%;

	width: 100%;

	margin: auto;

	display: table;

	top: 0;

	background-size: cover;

	background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;

}

.intro .inner{

	display: table-cell;

	vertical-align: middle;

	width: 100%;

	max-width: none;

}

.content {

	max-width: 600px;

	margin: 0 auto;

	text-align: center;

}

.content h1 {

	font-family: "Yantramana";

	font-size: 600%;

	font-weight: 100;

	color: #E1EFE9;

	line-height: 70%;

}

.btn{

	font-family: "montserrat";

	font-size: 135%;

	font-weight: 400;

	color: orange;

	text-transform: uppercase;

	text-decoration: none;

	border: solid #ffffff;

	padding: 10px 20px;

	border-radius: 9px;

	transition: all 0.7s;

}

.btn:hover {

	color: #CBDFD6;

	border: solid #CBDFD6;



}

.about-us{

	height:100%;

	width: 100%;

	margin: auto;

	display: table;

	background-color: #ffffff;

	background-size: cover;

	position: relative;

}

.ab-content {

	font-family: "Poiret One";

	font-weight: lighter;

	position: absolute;

	font-size: 150%;

	left: 50%;

	transform: translateX(-50%);

}

.ab-p{

	position: absolute;

	top: 10%;

	left: 50%;

	font-weight: lighter;

	transform: translateX(-50%);

	font-family: "montserrat";

}



.color {

	color:orange;

}

/*--- Media Queries --*/

@media screen and (max-width: 900px) {



}

@media screen and (max-width: 768px) {



}

@media screen and (max-width: 480px) {

	

}

<!DOCTYPE html>

<html>    

<head>

	<title>Full Screen Landing Page</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" type="text/css" href="style.css">

	<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

  	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

  	<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

	<link href="css/animate.css" rel="stylesheet"/>

	<link href="css/waypoints.css" rel="stylesheet"/>

	<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>

	<script src="js/waypoints.js" type="text/javascript"></script>

</head>

<body>

	<section class="intro">

		<div class="inner">

			<div class="content">

				<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">

					<h1>Find <span class="color">Your</span> Taste!</h1>

				</section>

				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">

					<a class="btn" href="#">Get Started</a>

			</div>

		</div>

	</section>

	<section class="about-us">

		<div class="ab-inner">

			<div class="ab-content">

				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">

					<h2 class="center">Our Mission</h2>

					<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">

						<p class="ab-p">Our mission is to provide the best food ingedients.</p>

			</div>

		</div>

	</section>

</body>

</html>





javascript html css




javascript html css






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 20 '18 at 23:20









jeanpaulxiao

1635




1635










asked Nov 20 '18 at 19:39









Ross LintonRoss Linton

123




123








  • 1





    Your content class is 600px in width and the text and font size of your text is big therefore it will break into a new line if the content is bigger than the width. Increase the width or reduce the font size and the text will be in a single line

    – Julian Espinosa
    Nov 20 '18 at 19:44






  • 2





    You should read about position: absolute and what it actually does. It is almost certainly the wrong thing to be using here.

    – Turnip
    Nov 20 '18 at 19:47














  • 1





    Your content class is 600px in width and the text and font size of your text is big therefore it will break into a new line if the content is bigger than the width. Increase the width or reduce the font size and the text will be in a single line

    – Julian Espinosa
    Nov 20 '18 at 19:44






  • 2





    You should read about position: absolute and what it actually does. It is almost certainly the wrong thing to be using here.

    – Turnip
    Nov 20 '18 at 19:47








1




1





Your content class is 600px in width and the text and font size of your text is big therefore it will break into a new line if the content is bigger than the width. Increase the width or reduce the font size and the text will be in a single line

– Julian Espinosa
Nov 20 '18 at 19:44





Your content class is 600px in width and the text and font size of your text is big therefore it will break into a new line if the content is bigger than the width. Increase the width or reduce the font size and the text will be in a single line

– Julian Espinosa
Nov 20 '18 at 19:44




2




2





You should read about position: absolute and what it actually does. It is almost certainly the wrong thing to be using here.

– Turnip
Nov 20 '18 at 19:47





You should read about position: absolute and what it actually does. It is almost certainly the wrong thing to be using here.

– Turnip
Nov 20 '18 at 19:47












2 Answers
2






active

oldest

votes


















0














I assume you would like the "Our Mission" section to be centered and readable.



.ab-p {

    font-weight: lighter;

    font-family: "montserrat";

    text-align: center;

}



h2 {

    text-align: center;

}


Recommendation: don't use position:absolute unless you absolutely needed it, because this rule removes the element from the automatic positioning of the browser - meaning you are in complete control of where to position it.






share|improve this answer



















  • 1





    it worked thank you for your suggestion.

    – Ross Linton
    Nov 20 '18 at 20:27



















1














"Relative" "position" relates positions, so this can avoid mess.



.ab-content {

    font-family: "Poiret One";

    font-weight: lighter;

    position: relative;

    font-size: 150%;

    left: 50%;

    transform: translateX(-50%);

   }







share|improve this answer
























  • w3school position property

    – Ehsan
    Nov 20 '18 at 20:05











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53400360%2fcss-positioning-i-am-having-a-problem-with-positioning%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














I assume you would like the "Our Mission" section to be centered and readable.



.ab-p {

    font-weight: lighter;

    font-family: "montserrat";

    text-align: center;

}



h2 {

    text-align: center;

}


Recommendation: don't use position:absolute unless you absolutely needed it, because this rule removes the element from the automatic positioning of the browser - meaning you are in complete control of where to position it.






share|improve this answer



















  • 1





    it worked thank you for your suggestion.

    – Ross Linton
    Nov 20 '18 at 20:27
















0














I assume you would like the "Our Mission" section to be centered and readable.



.ab-p {

    font-weight: lighter;

    font-family: "montserrat";

    text-align: center;

}



h2 {

    text-align: center;

}


Recommendation: don't use position:absolute unless you absolutely needed it, because this rule removes the element from the automatic positioning of the browser - meaning you are in complete control of where to position it.






share|improve this answer



















  • 1





    it worked thank you for your suggestion.

    – Ross Linton
    Nov 20 '18 at 20:27














0












0








0







I assume you would like the "Our Mission" section to be centered and readable.



.ab-p {

    font-weight: lighter;

    font-family: "montserrat";

    text-align: center;

}



h2 {

    text-align: center;

}


Recommendation: don't use position:absolute unless you absolutely needed it, because this rule removes the element from the automatic positioning of the browser - meaning you are in complete control of where to position it.






share|improve this answer













I assume you would like the "Our Mission" section to be centered and readable.



.ab-p {

    font-weight: lighter;

    font-family: "montserrat";

    text-align: center;

}



h2 {

    text-align: center;

}


Recommendation: don't use position:absolute unless you absolutely needed it, because this rule removes the element from the automatic positioning of the browser - meaning you are in complete control of where to position it.







share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 20 '18 at 19:53









jeanpaulxiaojeanpaulxiao

1635




1635








  • 1





    it worked thank you for your suggestion.

    – Ross Linton
    Nov 20 '18 at 20:27














  • 1





    it worked thank you for your suggestion.

    – Ross Linton
    Nov 20 '18 at 20:27








1




1





it worked thank you for your suggestion.

– Ross Linton
Nov 20 '18 at 20:27





it worked thank you for your suggestion.

– Ross Linton
Nov 20 '18 at 20:27













1














"Relative" "position" relates positions, so this can avoid mess.



.ab-content {

    font-family: "Poiret One";

    font-weight: lighter;

    position: relative;

    font-size: 150%;

    left: 50%;

    transform: translateX(-50%);

   }







share|improve this answer
























  • w3school position property

    – Ehsan
    Nov 20 '18 at 20:05
















1














"Relative" "position" relates positions, so this can avoid mess.



.ab-content {

    font-family: "Poiret One";

    font-weight: lighter;

    position: relative;

    font-size: 150%;

    left: 50%;

    transform: translateX(-50%);

   }







share|improve this answer
























  • w3school position property

    – Ehsan
    Nov 20 '18 at 20:05














1












1








1







"Relative" "position" relates positions, so this can avoid mess.



.ab-content {

    font-family: "Poiret One";

    font-weight: lighter;

    position: relative;

    font-size: 150%;

    left: 50%;

    transform: translateX(-50%);

   }







share|improve this answer













"Relative" "position" relates positions, so this can avoid mess.



.ab-content {

    font-family: "Poiret One";

    font-weight: lighter;

    position: relative;

    font-size: 150%;

    left: 50%;

    transform: translateX(-50%);

   }








share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 20 '18 at 20:03









EhsanEhsan

111




111













  • w3school position property

    – Ehsan
    Nov 20 '18 at 20:05



















  • w3school position property

    – Ehsan
    Nov 20 '18 at 20:05

















w3school position property

– Ehsan
Nov 20 '18 at 20:05





w3school position property

– Ehsan
Nov 20 '18 at 20:05


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53400360%2fcss-positioning-i-am-having-a-problem-with-positioning%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-

Popular posts from this blog

mysqli_query(): Empty query in /home/lucindabrummitt/public_html/blog/wp-includes/wp-db.php on line 1924

Image
0 I just uploaded a new plugin to my wordpress site and I got this warning: mysqli_query(): Empty query in /home/lucindabrummitt/public_html/blog/wp-includes/wp-db.php on line 1924 Usually if I have a problem, I can find answers on google but this one seems pretty particular and I'm not finding any info on it except for this forum. I'm not terribly techie but if someone can tell me how to read this and how to change it I can follow directions pretty well. Thanks All! PS If I don't have the proper tags here could someone add the appropriate tags? php mysql wordpress share | improve this question asked Nov 16 '18 at 20:41 ...
Read more

How to change which sound is reproduced for terminal bell?

Image
3 Recently upgrade to 18.10 from 18.04, and using the terminal is becoming annoying: the new alert sound is a drip ( /usr/share/sounds/gnome/default/alerts/drip.ogg ), and the previous one is still located at ( /usr/share/sounds/ubuntu/stereo/bell.ogg ). My issue is that at the gnome-terminal, when autocompleting or pressing left BOTH sounds are reproduced, at the same time. I want to just have ubuntu/stereo/bell.ogg active, not both . At the moment I have been only able to reduce the volume of the alerts (but still both are played), or turn the alerts down (but I dislike both "solutions"). gnome-terminal 18.10 teminal-bell share | improve this question ...
Read more

Can I use Tabulator js library in my java Spring + Thymeleaf project?

Image
0 I want to add Tabulator js to my java project. I added tabulator.min.js, tabulator.min.css to resources folder. After that added to my html page these dependencies as recommending in readme.md. <link rel="stylesheet" th:href="@{/css/tabulator.min.css}"> <script type="text/javascript" th:src="@{/js/tabulator.min.js}"></script> Now my tables view all elements, that I have in the html page, but not correct. In the documentation of Tabulator is example how to create header and table, var table = new Tabulator("#example-table", { columns:[ {title:"Name", field:"name", sorter:"string", width:200, editor:true}, {title:"Age", field:"age", sorter:"...
Read more