CODEWITHSUNDEEP
htmlcssresponsive-design
Becky
Becky

Reputation: 2275

Text moving to next line without width issues

I am completely stumped on an issue I am having. It is the simplest issue, but I just can't locate the issue. I have a line of text with a border around it to act as a button. I increased the text within this and since then half of the text jumps to the next line whenever the viewport is lower than 1200px.

I created a snippet to replicate this, but even that won't help, so this most likely has to be seen live. The area the issue is at is in the "Grow your business with us" section at the very bottom of that section (under the 3 images).

Please view it in a viewport of less than 1200px

What is causing the self made button to be on 2 lines? I have the width set to 100%?

$(function() {
  $('#see-all-services-text').animate({
    opacity: 1,
    left: '0%'
  }, 700);
  })
#home-img-block-section {
	width: 100%;
	height: 850px;
}
#see-all-services {
	width: 100%;
	height: 75px;
	text-align: center;
}
#see-all-services-text {
    opacity: 0;
	font-size: 1.3em;
	position: relative;
	left: -30%;
}
#see-all-services-text a {
	text-decoration: none;
	color: #45a5ba;
	cursor: pointer;
}
#see-all-services-button {
	padding: 15px 20px;
	border: 2px solid #45a5ba;
	transition: ease-in-out .5s;
}
#see-all-services-button:hover {
	border: 2px solid #45a5ba;
	color: #FFF;
	background: #45a5ba;
	transition: ease-in-out .5s;
}

/*---------------------------------------------- MEDIA QUERY 961 - 1200--------------------------*/

@media screen and (min-width: 961px) and (max-width: 1200px) {
#home-img-block-section {
	height: 670px;
}
#see-all-services-text {
	font-size: 1.2em;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-block-section">
  <div id="see-all-services">
    <div id="see-all-services-text"><a href="services"><span id="see-all-services-button">VIEW ALL WEB DESIGN SERVICES</span></a></div>
  </div>
</div>

Upvotes: 0

Views: 69

Answers (1)

t1m0n
t1m0n

Reputation: 3431

It's happening because your button is inline element. Set display:inline-block; to it and remove width:100%;, and everything should be ok.

Your snippet:

$(function() {
  $('#see-all-services-text').animate({
    opacity: 1,
    left: '0%'
  }, 700);
  })
#home-img-block-section {
	width: 100%;
	height: 850px;
}
#see-all-services {
	width: 100%;
	height: 75px;
	text-align: center;
}
#see-all-services-text {
    opacity: 0;
	font-size: 1.3em;
	position: relative;
	left: -30%;
}
#see-all-services-text a {
	text-decoration: none;
	color: #45a5ba;
	cursor: pointer;
}
#see-all-services-button {
	padding: 15px 20px;
    display: inline-block;
	border: 2px solid #45a5ba;
	transition: ease-in-out .5s;
}
#see-all-services-button:hover {
	border: 2px solid #45a5ba;
	color: #FFF;
	background: #45a5ba;
	transition: ease-in-out .5s;
}

/*---------------------------------------------- MEDIA QUERY 961 - 1200--------------------------*/

@media screen and (min-width: 961px) and (max-width: 1200px) {
#home-img-block-section {
	height: 670px;
}
#see-all-services-text {
	font-size: 1.2em;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home-img-block-section">
  <div id="see-all-services">
    <div id="see-all-services-text"><a href="services"><span id="see-all-services-button">VIEW ALL WEB DESIGN SERVICES</span></a></div>
  </div>
</div>

Upvotes: 2

Related Questions