Jump to content

Need help aligning these boxes

Recommended Posts

Site URL: https://elephant-raspberry-f4jz.squarespace.com/

hey guys!

 

I'm just trying to align these "service" boxes on the same line horizontally. I'm not sure why it's happening. It displays fine on code block:  https://codepen.io/annamakesmagic/pen/ZEoOMVq

but when added to the block with the div labelled "lead"  ("Our core service is...") the alignment gets weird. 

Can someone please show me how I can change my code (below) to fix it? Thanks! 

 

<style> 
  .lead {
    display: block;
    padding-top: 3%;
    width: 100%;
    padding-bottom: 3%;}
  
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;}

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;}

a {
  text-decoration: none;
  margin: 1rem 0;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 1px;}

p { font-size: 0.9rem;
  margin: 1rem 0;
  line-height: 1.4;}

.service a {
  color: #d3d3d3;
  display: block;}

.service h4 {
  font-color: #D3D3D3;
  font-size: 1.3rem;
  margin: 12rem 0 0.6rem;}

.services-grid {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  justify-content: space-between;
  max-width: 1300px;
  margin: 0 auto;
  text-align: center;
  padding-top: 60px; }

.service { 
  align-items: start;
  background: #fff;
  margin: 30px;
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  -webkit-box-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #e7e7e7;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  min-height: 300px;
  max-width: 50%;}

.service:hover {color: #333332}

.service:hover {
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
  border: 1px solid #f26522;}

.service .cta span {
  font-size: .8rem;
  color: #f265;}
.service .cta:hover {color: #f26522; }

.service > * {
  flex: 1 1 100%;}

.service .cta {align-self: flex-end;}

@media all and (max-width:900px) {
  .services-grid {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;}}
</style>

<div class= "lead">
<h2> Our core service is making <br> our <span style="text-decoration:line-through">clients</span> 
partners successful. <br> </div>

 

<section>
  <div class="services-grid">
    <div class="service">
      <h4>Tenant Representation</h4>
      <p>The right space is essential to the well-being of your business. We create strategies to ensure you’re in the right space, at the right time, for the right price.</p>
      <a href="#" class="cta">Read More <span class="ti-angle-right"></a>
    </div>

    <div class="service">
      <h4>Acquisitions & Dispositions</h4>
      <p>We know what makes a good deal and have a knack for finding them. We assist buyers and sellers in the acquisition and disposition of investment properties and land.</p>
      <a href="#" class="cta">Read More <span class="ti-angle-right"></a>
    </div>

    <div class="service">
      <h4>Project Leasing</h4>
      <p>Leasing the last 10% is where the profit lies. We know our markets and leverage longstanding relationships with retailers and brokers to ensure the project gets done.</p>
<a href="#" class="cta">Read more <span class="ti-angle-right"></span></a>

    </div>
  </div>
</section>

 

 

Screen Shot 2022-09-15 at 3.13.38 PM.png

Link to comment

Hi @AnnaNeedsHelp, it looks like from your live site that you've fixed the alignment (as far as I can see), is this still something that you need addressing?

You code looks pretty good, but there's maybe a typo for the .service h4 top margin of 12rem, should be 1.2rem, maybe? You may want to adjust the padding around the blocks so that they are a bit more responsive on medium sized screens, using a vw value rather than a px. There's also a 50% max width on the blocks that you may want to remove at your mobile breakpoint of 900px (it looks odd at screen sizes around 800px wide).

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Create an account or sign in to comment

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

×
×
  • 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.