Search code examples
htmlcssflexbox

Space on top and bottom of image in Flexbox layout

I have a two column flex layout with an image on the left and text on the right. Looks great at desktop size, but when it starts scaling down to my mobile break point, the image is sized down and there is "padding" on the top and bottom when I want it to take up the entire div.

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: #fff;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: #F26922;
  background-color: #fff;
}

.section-v {
  background-color: #285473;
}

.flex-container-v {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.flex-left-v {
  padding: 0px;
  align-items: center;
  width: 50%;
}

.placeholder {
  width: 100%;
  height: 100%;
}

.flex-right-v {
  padding: 0px;
  width: 50%;
}

.content-v {
  margin-right: 10%;
  margin-left: 10%;
  margin-top: 20%;
  margin-bottom: 20%;
  text-align: center;
}

.h2-v {
  font-size: 32px;
}

.white-v {
  color: #fff!important;
}

a .button:link {
  background-color: #F26922;
  border: none;
  border-radius: 30px;
  color: #fff!important;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold!important;
  text-decoration: none!important;
}

a .button:hover,
a .button:active {
  background-color: white!important;
  border: none!important;
  border-radius: 30px;
  color: #F26922!important;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
}


/* Responsive layout - makes a one column-layout instead of a two-column layout */

@media (max-width: 900px) {
  .flex-right-v,
  .flex-left-v {
    flex: 100%;
  }
  .content-v {
    margin: 10%;
  }
  .white-v {
    color: #fff!important;
  }
}
<div class="section-v">
  <div class="flex-container-v">
    <div class="flex-left-v">
      <img class="placeholder" src="image.jpg" alt="placeholder">
    </div>
    <div class="flex-right-v">
      <div class="content-v">
        <h2 class="h2-v white-v">Text here</h2>
        <p class="white-v">
          text here
        </p>
        <a class="button" href="#form-section">Sign up today!</a>
      </div>
    </div>
  </div>
</div>
</div>

Example of what is happening on the top and bottom of the image enter image description here

Solution

  • Remove the margin-top & margin-bottom from the content-v class. The text and size of the box is already determined by other CSS which has been written, so the margin top and bottom are just getting in the way on smaller browser dimensions.

    .content-v {
    margin-right: 10%;
    margin-left: 10%;
    /* margin-top: 20%; */
    /* margin-bottom: 20%; */
    text-align: center;
}

    Below is a working version to better display the change. I added two more of the sections and a real image to better display the content.

            * {
            box-sizing: border-box;
        }

        a {
            text-decoration: none;
            color: #fff;
        }

        a:visited {
            text-decoration: none;
        }

        a:hover {
            text-decoration: none;
            color: #F26922;
            background-color: #fff;
        }

        .section-v {
            background-color: #285473;
        }

        .flex-container-v {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            flex-direction: row;
        }

        .flex-left-v {
            padding: 0px;
            align-items: center;
            width: 50%;

        }

        .placeholder {
            width: 100%;
            height: 100%;
        }

        .flex-right-v {
            padding: 0px;
            width: 50%;

        }

        .content-v {
            margin-right: 10%;
            margin-left: 10%;
            text-align: center;
        }

        .h2-v {
            font-size: 32px;
        }

        .white-v {
            color: #fff !important;
        }

        a .button:link {
            background-color: #F26922;
            border: none;
            border-radius: 30px;
            color: #fff !important;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            font-weight: bold !important;
            text-decoration: none !important;
        }

        a .button:hover,
        a .button:active {
            background-color: white !important;
            border: none !important;
            border-radius: 30px;
            color: #F26922 !important;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            font-weight: bold;
        }

        /* Responsive layout - makes a one column-layout instead of a two-column layout */
        @media (max-width: 900px) {

            .flex-right-v,
            .flex-left-v {
                flex: 100%;
            }

            .content-v {
                margin: 10%;
            }

            .white-v {
                color: #fff !important;
            }

        }
    <body>
    <div class="section-v">
        <div class="flex-container-v">
            <div class="flex-left-v">
                <img class="placeholder" src="https://s.imgur.com/images/logo-1200-630.jpg?2" alt="placeholder">
            </div>
            <div class="flex-right-v">
                <div class="content-v">
                    <h2 class="h2-v white-v">Text here</h2>
                    <p class="white-v">
                        text here
                    </p>
                    <a class="button" href="#form-section">Sign up today!</a>
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="section-v">
        <div class="flex-container-v">
            <div class="flex-left-v">
                <img class="placeholder" src="https://s.imgur.com/images/logo-1200-630.jpg?2" alt="placeholder">
            </div>
            <div class="flex-right-v">
                <div class="content-v">
                    <h2 class="h2-v white-v">Text here</h2>
                    <p class="white-v">
                        text here
                    </p>
                    <a class="button" href="#form-section">Sign up today!</a>
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="section-v">
        <div class="flex-container-v">
            <div class="flex-left-v">
                <img class="placeholder" src="https://s.imgur.com/images/logo-1200-630.jpg?2" alt="placeholder">
            </div>
            <div class="flex-right-v">
                <div class="content-v">
                    <h2 class="h2-v white-v">Text here</h2>
                    <p class="white-v">
                        text here
                    </p>
                    <a class="button" href="#form-section">Sign up today!</a>
                </div>
            </div>
        </div>
    </div>
    </div>
</body>