Jump to content

Code block columns are stacking

Recommended Posts

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

Link to comment
  • Replies 0
  • Views 547
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.