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

HTML forms are larger in size on web pages than in Internet Explorer

Expanding Two HTML Elements to Fill the Screen Width Using HTML/CSS

Swap File Field for Picture Graphic - HTML/CSS

Adjusting the <div> size for optimal display on iPhone and iPad screens

What is preventing the buttons from filling the entire space of the parent element in this case?

Is it possible to adjust positioning using just CSS?

Tips for maintaining the fixed size of a table header and preventing it from resizing in width

Tips for personalizing Ion text area in Ionic?

My goal is to have the "show more" button reveal extra information without having to reload the entire page

Limit the size of images with CSS properties like max-height or max-width

Tips for sending data through AJAX before the browser is about to close

Tips for creating a dynamic header background using custom CSS for my website design

Switch out the arrow icon in the dropdown menu with an SVG graphic

employ the value of one array in a different array

What is the best way to reach nested iframes?

Utilizing the enter key function for form submissions on lists in AngularJS

Using the Croppie plugin to crop an image before uploading via jQuery Ajax in PHP

Is it possible to customize the background color of select2 boxes separately for each option?

Load image in browser for future display in case of server disconnection

simultaneous image hover effect for all images