The elements within the flexbox are being truncated when viewed on smaller devices

Question

The elements within the flexbox are being truncated when viewed on smaller devices

I have encountered an issue with my code where the .content element, which has flex properties, appears cut off on small screens.

I want to avoid setting a fixed size because the text within it may vary in size.

The goal is for the background image to fill the height of large screens, while keeping the textual content centered on the right side. However, on smaller screens, the text should be displayed first and clearly visible before displaying the background image.

How can I ensure that the content remains visible and pushes the background image down on smaller screens? You can view the example here (adjust screen size).

html, body, .wrapper {
    height: 100%;
    padding: 0;
    margin: 0;
}

.wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100%;
}

.background {
    background: url('http://via.placeholder.com/800x600') no-repeat center center/cover;    
    display: flex;
    flex: 1;
    order: 2;
}

.content {
    flex: 1;
    order: 1;
    padding: 3em;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

@media screen and (min-width: 768px) {
    .wrapper {
        flex-direction: row;
    }
    .background {
        order: 1;
    }
    .content {
        order: 2;
    }
}

html css flexbox

Answer 1

Answer №1

Here are three key areas that require attention:

Increase the minimum height of wrapper (using viewport units) to allow it to expand with content and enable proper scrolling
Specify a fixed height: 600px; (or desired height) for .background on smaller screens to prevent collapse, as it will no longer stretch to fit like on wider screens
Assign flex: 1; to .background when on wider screens to ensure equal width distribution between content and background

The reason for setting height: 600px; on narrower screens is because a background-image applied to a div does not auto-size the element like an img would.

For updated code samples, visit the following links: CodePen | Stack Snippet

body {
  margin: 0;
  font: 1rem / 1.516 'Open Sans', sans-serif;
  background-color: #fff;
  color: #232323;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;              /*  changed  */
}

.background {
  background: url('http://via.placeholder.com/800x600') no-repeat center center/cover;
  height: 600px;                  /*  added  */
  order: 2;
}

.content {
  flex: 1;
  order: 1;
  padding: 3em;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media screen and (min-width: 768px) {
  .wrapper {
    flex-direction: row;
  }
  .background {
    height: auto;                 /*  added  */
    flex: 1;                      /*  moved  */
    order: 1;
  }
  .content {
    order: 2;
  }
}

<div class="wrapper">

  <div class="background">
  </div>

  <div class="content">

    <div class="content__podaci">
      <h1>What is Lorem Ipsum?</h1>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      <h2>Title</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      <h2>Something</h2>
      <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

  </div>

Answer 2

Here are three key areas that require attention:

Increase the minimum height of wrapper (using viewport units) to allow it to expand with content and enable proper scrolling
Specify a fixed height: 600px; (or desired height) for .background on smaller screens to prevent collapse, as it will no longer stretch to fit like on wider screens
Assign flex: 1; to .background when on wider screens to ensure equal width distribution between content and background

The reason for setting height: 600px; on narrower screens is because a background-image applied to a div does not auto-size the element like an img would.

For updated code samples, visit the following links: CodePen | Stack Snippet

body {
  margin: 0;
  font: 1rem / 1.516 'Open Sans', sans-serif;
  background-color: #fff;
  color: #232323;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;              /*  changed  */
}

.background {
  background: url('http://via.placeholder.com/800x600') no-repeat center center/cover;
  height: 600px;                  /*  added  */
  order: 2;
}

.content {
  flex: 1;
  order: 1;
  padding: 3em;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media screen and (min-width: 768px) {
  .wrapper {
    flex-direction: row;
  }
  .background {
    height: auto;                 /*  added  */
    flex: 1;                      /*  moved  */
    order: 1;
  }
  .content {
    order: 2;
  }
}

<div class="wrapper">

  <div class="background">
  </div>

  <div class="content">

    <div class="content__podaci">
      <h1>What is Lorem Ipsum?</h1>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      <h2>Title</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      <h2>Something</h2>
      <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

  </div>

Answer 3

Answer №2

Forget using height: 100% to restrict the size of the .wrapper to the viewport's height; opt for min-height: 100vh instead to allow the container to expand as needed.

Additionally, since child elements of a flex container automatically become flex items, convert the CSS background image into an actual HTML img tag to enable it to accept flex properties.

check out the updated CodePen here

body {
  font: 1rem / 1.516 'Open Sans', sans-serif;
  background-color: #fff;
  color: #232323;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.background {
  order: 2;
  padding: 1em;
}

.content {
  flex: 1;
  order: 1;
  padding: 3em;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media screen and (min-width: 768px) {
  .wrapper    { flex-direction: row; }
  .background { order: 1;            }
  .content    { order: 2;            }
}

<div class="wrapper">

  <div class="background">
    <img src="http://via.placeholder.com/800x600">
  </div>

  <div class="content">

    <div class="content__podaci">
      <h1>What is Lorem Ipsum?</h1>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      <h2>Title</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      <h2>Something</h2>
      <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

  </div>

Answer 4

Forget using height: 100% to restrict the size of the .wrapper to the viewport's height; opt for min-height: 100vh instead to allow the container to expand as needed.

Additionally, since child elements of a flex container automatically become flex items, convert the CSS background image into an actual HTML img tag to enable it to accept flex properties.

check out the updated CodePen here

body {
  font: 1rem / 1.516 'Open Sans', sans-serif;
  background-color: #fff;
  color: #232323;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.background {
  order: 2;
  padding: 1em;
}

.content {
  flex: 1;
  order: 1;
  padding: 3em;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media screen and (min-width: 768px) {
  .wrapper    { flex-direction: row; }
  .background { order: 1;            }
  .content    { order: 2;            }
}

<div class="wrapper">

  <div class="background">
    <img src="http://via.placeholder.com/800x600">
  </div>

  <div class="content">

    <div class="content__podaci">
      <h1>What is Lorem Ipsum?</h1>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      <h2>Title</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      <h2>Something</h2>
      <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

  </div>

Answer 5

Answer №3

Avoid using height:100% for the wrapper element.

html,
body {
  padding: 0;
  margin: 0;
}

body {
  font: 1rem / 1.516 'Open Sans', sans-serif;
  background-color: #fff;
  color: #232323;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

.background {
  background: url('http://via.placeholder.com/800x600') no-repeat center center/cover;
  flex: 1;
  order: 2;
  padding: 5em;
  height: 100%;
}

.content {
  order: 1;
  padding: 3em;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .wrapper {
    flex-direction: row;
  }
  .background {
    order: 1;
  }
  .content {
    order: 2;
  }
}

<div class="wrapper">

  <div class="background">
  </div>

  <div class="content">

    <div class="logo_wrapper">
      <img src="assets/logo.png" alt="Company Name">
    </div>

    <div class="content__data">
      <h1>What is Lorem Ipsum?</h1>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      <h2>Title></h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      <h2>Something</h2>
      <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

  </div>

Answer 6

Avoid using height:100% for the wrapper element.

html,
body {
  padding: 0;
  margin: 0;
}

body {
  font: 1rem / 1.516 'Open Sans', sans-serif;
  background-color: #fff;
  color: #232323;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

.background {
  background: url('http://via.placeholder.com/800x600') no-repeat center center/cover;
  flex: 1;
  order: 2;
  padding: 5em;
  height: 100%;
}

.content {
  order: 1;
  padding: 3em;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .wrapper {
    flex-direction: row;
  }
  .background {
    order: 1;
  }
  .content {
    order: 2;
  }
}

<div class="wrapper">

  <div class="background">
  </div>

  <div class="content">

    <div class="logo_wrapper">
      <img src="assets/logo.png" alt="Company Name">
    </div>

    <div class="content__data">
      <h1>What is Lorem Ipsum?</h1>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      <h2>Title></h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      <h2>Something</h2>
      <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

  </div>

Answer 7

Answer №4

    html, body, .wrapper {
    padding: 0;
    margin: 0;
}

body {
    font: 1rem / 1.516 'Open Sans', sans-serif;
    background-color: #fff;
    color: #232323;
}

.wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100vh;
}

.background {
    background: url('http://via.placeholder.com/800x600') no-repeat center center/cover;    
    display: flex;
    flex: 1;
    order: 2;
    padding: 1em;
}

.content {
    flex: 1;
    order: 1;
    padding: 3em;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
}

@media screen and (min-width: 768px) {
    .wrapper {
        flex-direction: row;
    }
    .background {
        order: 1;
    }
    .content {
        order: 2;
    }
}

For a live demo of this code snippet, check out the link to my CodePen.

If you want the content to be scrollable when it exceeds the visible area, you can simply apply overflow: auto; to the parent element.

Alternatively, you can use box-sizing: border-box; to ensure that padding is included in the total width and height calculation.

html, body, .wrapper {
    padding: 0;
    margin: 0;
    height: 100%;
    box-sizing: border-box;
}

This way, the padding will be considered within the defined height of 100% without affecting the overall layout.

Answer 8

    html, body, .wrapper {
    padding: 0;
    margin: 0;
}

body {
    font: 1rem / 1.516 'Open Sans', sans-serif;
    background-color: #fff;
    color: #232323;
}

.wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100vh;
}

.background {
    background: url('http://via.placeholder.com/800x600') no-repeat center center/cover;    
    display: flex;
    flex: 1;
    order: 2;
    padding: 1em;
}

.content {
    flex: 1;
    order: 1;
    padding: 3em;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
}

@media screen and (min-width: 768px) {
    .wrapper {
        flex-direction: row;
    }
    .background {
        order: 1;
    }
    .content {
        order: 2;
    }
}

For a live demo of this code snippet, check out the link to my CodePen.

If you want the content to be scrollable when it exceeds the visible area, you can simply apply overflow: auto; to the parent element.

Alternatively, you can use box-sizing: border-box; to ensure that padding is included in the total width and height calculation.

html, body, .wrapper {
    padding: 0;
    margin: 0;
    height: 100%;
    box-sizing: border-box;
}

This way, the padding will be considered within the defined height of 100% without affecting the overall layout.

The elements within the flexbox are being truncated when viewed on smaller devices

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What are the risks associated with allowing user-generated HTML or Javascript code on a website?

Receiving a sleek black overlay with dynamic text upon hovering over an image

jQuery: Struggling with removing dynamically generated elements

The CSS stylesheets are not compatible with IE7 and IE8

My attempt at creating a straightforward sorting function turned out to be ineffective

Using HTML and JavaScript to verify email addresses

Tips on designing checkboxes with CSS

Retrieving width and height of the content block inner in Framework7, excluding navbar and toolbar dimensions

Is there a way to control a single Angular application using multiple JavaScript scripts?

Unable to transmit HTML emails

Using Ajax to submit two forms by clicking a submit button

"I am looking for a way to retrieve dynamic data from a (click) event in Angular. Can

Learn the steps to update PHP headers on a specific website using AJAX

Customize your Bootstrap navbar dropdown to showcase menu items in a horizontal layout

Tips for utilizing flexbox and React-Native to ensure a cropped image takes up the entire View

Arrangement within a span

Looking to include an if/then statement for an item that has been generated within a div?

Although sanitize and raw display HTML tags, Slim remains unaffected

How can a variable value be implemented in HTML style within Jinjia2?