prevent divs from overlapping in responsive layout with flex

Question

I am a relatively new to the coding scene and I am trying to create my first responsive website. The page looks fine when the width is sufficiently large. However, when I test it on mobile devices or resize to a really small screen width, the "description" div overlaps onto the "profile pic". Is there a way where I can prevent this from happening? I've been trying for the past three days but to no avail. Trying my luck out here.

This is my code.

html, body {
  height: 100%;
  width: 100%;
  font-family: 'Lora', serif;
  background-color: lightgray
}

#navBarContainer {
  height: 15%;
  width: 100%;
  display: flex;
  align-items: center;
}

#contentPage {
  display: flex;
  height:75%;
  width: 100%;
  justify-content: center;
}

#container {
  height: 100%;
  width: 55%;
  display: flex;
}

#profilePicContainer {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  position: relative;
}

img {
  display: inline-block;
  height: 70%;
  border-radius: 200%;
  position: absolute;
  max-width: 100%;
  max-height: 100%;
}

#image {
  display: inline-block;
  height: 100%;
  width: 70%;
  border-radius: 200%;
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  background-color: black
}

#description {
  height: 100%;
  width: 100%;
  margin-left: 2%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

#CoverPageName {
  margin-left: 25%;
  font-size: 200%
}

#navBarLinks {
  margin-left: 10%;
  display: flex;
  justify-content: space-around;
  width: 25%;
}

a {
  color: black;
  text-decoration: none;
}

#navBarFont {
  font-size: 150%
}

#navBarFont:hover {
  transition: 0.2s;
  color: white
}

#helloFont {
  text-align: center;
  font-size: 400%
}

#circlesContainer {
  height: 30%;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.circles {
  height: 100%;
  width: 30%;
  border-radius: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 150%
}

#firstCircle {
  background-color: #BFFCE7;
}

#firstCircle:hover {
  background-color: #62B2C7;
  transition: 0.3s
}

#secondCircle {
  background-color: #F2D387;
}

#secondCircle:hover {
  background-color: #C7AD6F;
  transition: 0.3s
}

#thirdCircle {
  background-color: #FC4245;
}

#thirdCircle:hover {
  background-color: #C71B36;
  transition: 0.3s
}

#personalSummary {
  font-size: 125%
}



@media(max-width: 768px) {

  #navBarContainer {
    flex-direction: column;
  }

  #navBarLinks {
    width: 100%
  }

  #CoverPageName {
    margin-left: 0
  }

  #navBarLinks {
    margin-left: 0
  }

  #contentPage {
    height: 100%
  }

  #container {
    width: 100%;
    flex-direction: column;
  }

  #profilePicOuterContainer {
    margin: 0 auto
  }

  #description {
    margin: 0 auto
  }

  img {
    height: 450px
  }

  #circlesContainer {
    display: none;
  }

}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Portfolio website</title>
    <link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">

  </head>
  <body>
    <div id ="navBarContainer">
      <a id="CoverPageName" href="index.html">NAME</a>

      <div id="navBarLinks">
        <a id="navBarFont" href="education.html">Education</a>
        <a id="navBarFont" href="experience.html">Experience</a>
        <a id="navBarFont" href="skills.html">Skills</a>
      </div>
    </div>

    <div id="contentPage">
      <div id="container">

          <div id="profilePicContainer">
            <div id="image"></div>
          </div>

        <div id="description">

          <h1 id="helloFont" >Hi there,</h1> 

          <div id="circlesContainer">
            <a class="circles" id="firstCircle" href="education.html">Education</a>
            <a class="circles" id="secondCircle" href="experience.html">Experience</a>
            <a class="circles" id="thirdCircle" href="skills.html">Skills</a>
          </div>

          <p id="personalSummary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        </div>

      </div>
    </div>

  </body>
</html>

What is the behavior you would prefer? Would you like the containers to stack below a certain width? — Alexander Nied, Feb 08 '18 at 04:07
Font-size in % is a bit wacky. You're also going to run into a lot of mystery with % heights. What are they a percentage _of_? The window doesn't know how tall it is / which is a major CSS issue generally. How you've dealt with the image is also going to make no sense with proportions. See my example below for responsive images. — sheriffderek, Feb 08 '18 at 04:44

score 1 · Answer 1 · answered Feb 08 '18 at 04:08

The problem is that you're declaring both elements to be 100% height of the container... which doesn't make any sense, since that adds up to 200%.

So get rid of the height declarations, and use flex:1 1 auto; on #profilePicContainer so they compute to something that makes some sort of sense.

sheriffderek · Answer 2 · 2018-02-08T04:37:55.380

Welcome aboard! If you are new to programming, I suggest you start out on the right foot and forget ids and also that you use HTML5 elements:

<nav class="main-menu">
    <ul class="item-list">
        <li class="item">
            <a class="link" href="#">
                <span>Home</span>
            </a>
        </li>

        <li class="item">
            <a class="link" href="#">
                <span>Thing A</span>
            </a>
        </li>

        <li class="item">
            <a class="link" href="#">
                <span>Thing B</span>
            </a>
        </li>
    </ul>
</nav>

<main class="page-content">
    <figure class="image">
        <img src="https://placehold.it/400" alt="" />
    </figure>

    <section class="description">
        <header>
            <h1 class="welcome-message">Hi there</h1>
        </header>

        <aside class="circles">
            <ul class="item-list">
                <li class="item">
                    <a href="#" class="link">
                        <span>circle one</span>
                    </a>
                </li>

                <li class="item">
                    <a href="#" class="link">
                        <span>circle one</span>
                    </a>
                </li>

                <li class="item">
                    <a href="#" class="link">
                        <span>circle one</span>
                    </a>
                </li>
            </ul>
        </aside>

        <article class="story">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </article>
    </section>

</main>

As far as your question, it's hard to tell what you want to happen. Tossing your code in a jsFiddle looks like this: https://jsfiddle.net/kn26xL2e

I would highly suggest you write your media queries small-screen first.

If you explain what it's suppsed to look like, we can be more helpful.

body {
    margin: 0; /* remove default */
    background: lightgray;
}

a { /* good default links */
    display: block;
    text-decoration: none;
    color: inherit;
}

.item-list { /* remove list styles */
    list-style: none;
    margin: 0;
    padding: 0;
}

figure {
    margin: 0;
    padding: 0;
}

figure img { /* responsive images */
    display: block;
    width: 100%;
    height: auto;
}


.main-menu {
    background: blue;
}

.main-menu .item-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between
    color: white;
}

.main-menu .item {
    flex-basis: 33%;
}

.main-menu .link {
    padding: 1rem;
    text-align: center;
}

.main-menu .link:hover {
    background: navy;
    color: pink;
}

.page-content {
    border: 1px solid lime;
    padding: 1rem;
}

.page-content .image {
    max-width: 300px;
}

.circles .item-list {
    display: flex;
    flex-direction: row;
}

.circles .link {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: yellow;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

@media (min-width: 700px) {
    .page-content {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .page-content .image {
        flex-basis: 300px;
        flex-shrink: 0; /* no */
    }

    .page-content .description {
        padding-left: 2rem;
    }
}

https://codepen.io/sheriffderek/pen/EQNGVw

prevent divs from overlapping in responsive layout with flex

2 Answers2