kknaguib kknaguib - 2 months ago 6
CSS Question

Maintain equal distances between sections

I want to maintain equal distances between my sections. I've currently set the margin-bottom to 20%, which works great on desktop view and mobile view. But with the tablet the sections collide due to an image growing in size. Here's the code, any help is appreciated:



@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';

section {
padding-top: 50px;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 20%;
height: 100vh;
}
section .box {
padding: 50px;
background-color: rgba(0, 0, 0, 0.75);
}
.section-title {
margin-bottom: 20px;
font-size: 22px;
line-height: 28px;
color: white;
}
.frame-picture {
position: relative;
border: 2px solid;
border-color: rgba(255, 255, 255, 1);
overflow: hidden;
margin: 0 0 15px 0;
}

<div class="main">
<!-- Home -->
<section id="home" class="home-section">
<div class="">

</div>
</section>
<!-- About Me Section -->
<section id="about" class="about-section">
<div class="box">
<h2 class="section-title">A Little About Myself</h2>
<div class="row">
<div class="col-md-5 col-md-push-7">
<figure class="frame-picture">
<img class="img-responsive" src="https://res.cloudinary.com/knaguibimages/image/upload/v1475345839/ProfilePicV2_yevnyw.jpg" alt="Karim Naguib Profile Picture">
</figure>
</div>
<div class="col-md-7 col-md-pull-5">
<p>Hello! My name's Karim Naguib, and this page was developed to showcase my projects.</p>
<p>I graduated from the <a href="https://uwaterloo.ca/" target="_blank"> University of Waterloo</a> in 2015, with a BSc. in Management Engineering.</p>
</div>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section id="portfolio" class="portfolio-section">
<div class="box">
<h2 class="section-title">My Work</h2>
</div>
</section>
<!-- Contact Me Section -->
<section id="contact" class="contact-section">
<div class="box">
<h2 class="section-title">Get In Touch</h2>
</div>
</section>

</div>





Section Collision Screenshot

Answer

Use flexbox. Wrap the following flex container around the sections:

.main {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: space-between;
  align-items: space-between;
  margin: 40px auto;
  padding: 20px;
  background: url(http://arbectravel.com/wp-content/uploads/2015/08/aruba1.jpg)
}

And add the following ruleset to the section that contains the picture:

 flex: 0 1 auto;

I wish you good luck job hunting.

SNIPPET

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
 body {
  color: #fff;
}
.main {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: space-between;
  align-items: space-between;
  margin: 40px auto;
  padding: 20px;
  background: url(http://arbectravel.com/wp-content/uploads/2015/08/aruba1.jpg)
}
section {
  width: 100%;
  margin: 0 auto;
}
section .box {
  padding: 5px 20px;
  margin: 20px auto;
  background-color: rgba(0, 0, 0, 0.75);
}
.section-title {
  font-size: 22px;
  line-height: 28px;
  color: white;
}
.frame-picture {
  border: 2px solid;
  border-color: rgba(255, 255, 255, 1);
  overflow: hidden;
  margin: 0 0 15px 0;
  flex: 0 1 auto;
}
<div class="main">
  <!-- Home -->
  <section id="home" class="home-section">
    <div class="">

    </div>
  </section>
  <!-- About Me Section -->
  <section id="about" class="about-section">
    <div class="box">
      <h2 class="section-title">A Little About Myself</h2>
      <div class="row">
        <div class="col-md-5 col-md-push-7">
          <figure class="frame-picture">
            <img class="img-responsive" src="https://res.cloudinary.com/knaguibimages/image/upload/v1475345839/ProfilePicV2_yevnyw.jpg" alt="Karim Naguib Profile Picture">
          </figure>
        </div>
        <div class="col-md-7 col-md-pull-5">
          <p>Hello! My name's Karim Naguib, and this page was developed to showcase my projects.</p>
          <p>I graduated from the <a href="https://uwaterloo.ca/" target="_blank"> University of Waterloo</a> in 2015, with a BSc. in Management Engineering.</p>
        </div>
      </div>
    </div>
  </section>
  <!-- Portfolio Section -->
  <section id="portfolio" class="portfolio-section">
    <div class="box">
      <h2 class="section-title">My Work</h2>
    </div>
  </section>
  <!-- Contact Me Section -->
  <section id="contact" class="contact-section">
    <div class="box">
      <h2 class="section-title">Get In Touch</h2>
    </div>
  </section>

</div>

Comments