Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
kristenblowfield

Code block columns are stacking

Question

Site URL: https://www.core4.com.au/home-1

Hi there,

Squarespace 7.1 user.

I am trying to make my code block with the 3 results column view for desktop but they are stacking on top of one another. Does anyone know why my code keeps stacking rather than sitting next to each other? Also why the icons arent appearing.

Screenshots attached and code below. 

HTML

<div class="content-103">
	<div class="container">
		<div class="row">
			<h2 class="sercies-title">Our Awesome Services</h2>
			<div class="col-md-4 col-sm-4">
				<div class="service-post">
					<div class="service-content">
						<div class="service-icon">
								<i class="fa fa-share-alt"></i>
						</div> <!-- service-icon -->
						<h3 class="service-title">Advertising</h3>
						<p class="service-description">Seitan brunch meh, food truck Wes Anderson quinoa XOXO readymade gastropub gluten-free heirloom wolf skateboard.</p>
					</div> <!-- service-content -->
					<div class="service-hover"></div>
				</div>
			</div>
			<div class="col-md-4 col-sm-4">
				<div class="service-post">
					<div class="service-content">
						<div class="service-icon">
								<i class="fa fa-pencil"></i>
						</div> <!-- .s-icon -->
						<h3 class="service-title">Branding Design</h3>
						<p class="service-description">Seitan brunch meh, food truck Wes Anderson quinoa XOXO readymade gastropub gluten-free heirloom wolf skateboard.</p>
					</div> <!-- service-content -->
					<div class="service-hover"></div>
				</div>
			</div>
			<div class="col-md-4 col-sm-4">
				<div class="service-post">
					<div class="service-content">
						<div class="service-icon">
								<i class="fa fa-lightbulb-o"></i>
						</div> <!-- .s-icon -->
						<h3 class="service-title">Creative Marketing</h3>
						<p class="service-description">Seitan brunch meh, food truck Wes Anderson quinoa XOXO readymade gastropub gluten-free heirloom wolf skateboard.</p>
					</div> <!-- service-content -->
					<div class="service-hover"></div>
				</div>
			</div>
		</div>
	</div>
</div>

 

CSS

.content-103{
	background: #f3f3f3;
	padding-bottom:50px;
}

.content-103 .sercies-title{
	text-align:center;
	padding: 50px 0;
}

.service-post {
  background: #fff;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  position: relative;
  z-index: 12;
  margin-bottom: 30px;
  -moz-box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.08);
  -webkit-box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.08);
  box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.08);
}
.content-103 .service-content {
  position: relative;
  z-index: 13;
}
.content-103 .service-icon {
  margin: 10px 0 20px 0;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  text-align: center;
  border: 2px solid #eb7a5c;
  margin-left: auto;
  margin-right: auto;
  line-height: 50px;
  -moz-transition: color, 250ms;
  -o-transition: color, 250ms;
  -webkit-transition: color, 250ms;
  transition: color, 250ms;
}
.content-103 .service-post:hover .service-icon {
  border-color: #fff;
}
.content-103 .service-icon i {
  font-size: 18px;
  color: #eb7a5c;
}
.content-103 .service-post:hover .service-icon i {
  color: #fff;
}
.content-103 .service-title {
  font-size: 16px;
  font-weight: normal;
  margin-bottom: 15px;
  -moz-transition: color, 250ms;
  -o-transition: color, 250ms;
  -webkit-transition: color, 250ms;
  transition: color, 250ms;
}
.content-103 .service-post:hover .service-title {
  color: #fff;
}
.content-103 .service-description {
  -moz-transition: color, 250ms;
  -o-transition: color, 250ms;
  -webkit-transition: color, 250ms;
  transition: color, 250ms;
}
.content-103 .service-post:hover .service-description {
  color: #fff;
}


.content-103 .service-hover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 11;
  width: 100%;
  height: 0px;
  background: #eb7a5c;
  -moz-transition: width, 250ms;
  -o-transition: width, 250ms;
  -webkit-transition: width, 250ms;
  transition: width, 250ms;
}
/*hover-background-color effect*/
.content-103 .service-post:hover .service-hover {
  height: 100%;
}

 

 

Thank you

Services.PNG

Services 2.PNG

Share this post


Link to post

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...