Seeking assistance with CSS - need to adjust block layout based on media query - considering using flexbox

Question

Seeking assistance with CSS - need to adjust block layout based on media query - considering using flexbox

I struggle with HTML5/CSS and have a simple task of laying out three DIVs differently based on screen size, using @media declarations.

Layout 1                                Layout 2

+----- container -----------------+    +----- container ---------------------+
| +-----------------------------+ |    | +------------+  +-----------------+ |
| | header text                 | |    | | thumbnail  |  | header text     | |
| +-----------------------------+ |    | | image      |  +-----------------+ |
| +------------+  +-------------+ |    | |            |  +-----------------+ |
| | thumbnail  |  | body text   | |    | +------------+  | body text body  | |
| | image      |  | body text   | |    |                 | text body text  | |
| |            |  | body text   | |    |                 | body text ..... | |
| +------------+  +-------------+ |    |                 +-----------------+ | 
+---------------------------------+    +-------------------------------------+

The basic structure is as follows:

<div id="container">
  <div id="header">header text</div>
  <div id="thumbnail"><a href="xxx"><img src="yyy" /></a></div>
  <div id="bodytext">Some free-form text to be wrapped</div>
</div>

The thumbnail images are fixed in size. My current approach involves:

In Layout 1, I use float:left for the 'thumbnail' and 'bodytext' divs. In Layout 2, I apply padding-left: [image width]px; to the 'header' and 'bodytext' divs, along with absolute positioning of the 'thumbnail'.

However, this solution feels inelegant and makeshift, with concerns about compatibility across different browsers and devices.

Is there a better alternative such as flexbox?

html css

Answer 1

Answer №1

If you're looking for a solution, consider using the CSS Grid. To see the solution clearly, try viewing it in full screen and experimenting with the Grid Generator tool.

#container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

#header {
  grid-area: 1 / 1 / 2 / 3;
}

#thumbnail {
  grid-area: 2 / 1 / 3 / 2;
}

#bodytext {
  grid-area: 2 / 2 / 3 / 3;
}

@media (max-width:600px) {
  #header {
    grid-area: 1 / 2 / 2 / 3;
  }
  #thumbnail {
    grid-area: 1 / 1 / 2 / 2;
  }
  #bodytext {
    grid-area: 2 / 2 / 3 / 3;
  }
}

/* Additional Styling for Snippet */

#container > div { background: #5548B0; color: #fff; text-align: center; font-size: 2em; padding: 5%; }

<div id="container">
  <div id="header">Header Text</div>
  <div id="thumbnail">
    <a href="stackoverflow.com"><img src="https://loremflickr.com/320/240"></a>
  </div>
  <div id="bodytext">Some free-form text to be wrapped</div>
</div>

Answer 2

If you're looking for a solution, consider using the CSS Grid. To see the solution clearly, try viewing it in full screen and experimenting with the Grid Generator tool.

#container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

#header {
  grid-area: 1 / 1 / 2 / 3;
}

#thumbnail {
  grid-area: 2 / 1 / 3 / 2;
}

#bodytext {
  grid-area: 2 / 2 / 3 / 3;
}

@media (max-width:600px) {
  #header {
    grid-area: 1 / 2 / 2 / 3;
  }
  #thumbnail {
    grid-area: 1 / 1 / 2 / 2;
  }
  #bodytext {
    grid-area: 2 / 2 / 3 / 3;
  }
}

/* Additional Styling for Snippet */

#container > div { background: #5548B0; color: #fff; text-align: center; font-size: 2em; padding: 5%; }

<div id="container">
  <div id="header">Header Text</div>
  <div id="thumbnail">
    <a href="stackoverflow.com"><img src="https://loremflickr.com/320/240"></a>
  </div>
  <div id="bodytext">Some free-form text to be wrapped</div>
</div>

Answer 3

Answer №2

Utilizing CSS grid appears to be the best approach. One adjustment I've implemented to Manoj's solution is incorporating the min-content directive to ensure a row adjusts to the smallest height required for content rendering, while also spanning the thumbnail cell over rows 1 and 2.

#container {
  display: grid;
  grid-template-columns: 320px 1fr;
  grid-template-rows: min-content 1fr;
  grid-column-gap: 8px;
}

#header {
  font-size: 2em;
  color: white;
  grid-row: 1;
  grid-column: 2;
}

#thumbnail {
  grid-row: 1 / span 2;
  grid-column: 1;
}

#bodytext {
  color: red;
  grid-row:2;
  grid-column: 2;
}

@media (max-width:600px) {
  #header {
    grid-column: 1 / span 2;
  }
  #thumbnail {
      grid-row:2;
      grid-column: 1;
  }
}

/* Additional Styling for Snippet */

#container > div { 
     background: #5548B0; 
     text-align: center; 
 }

<div id="container">
  <div id="header">Header Text</div>
  <div id="thumbnail">
    <a href="stackoverflow.com"><img src="https://loremflickr.com/320/240"></a>
  </div>
  <div id="bodytext">Some free-form text to be wrapped. Some free-form text to be wrapped. Some free-form text to be wrapped. Some free-form text to be wrapped.</div>
</div>

Answer 4

Utilizing CSS grid appears to be the best approach. One adjustment I've implemented to Manoj's solution is incorporating the min-content directive to ensure a row adjusts to the smallest height required for content rendering, while also spanning the thumbnail cell over rows 1 and 2.

#container {
  display: grid;
  grid-template-columns: 320px 1fr;
  grid-template-rows: min-content 1fr;
  grid-column-gap: 8px;
}

#header {
  font-size: 2em;
  color: white;
  grid-row: 1;
  grid-column: 2;
}

#thumbnail {
  grid-row: 1 / span 2;
  grid-column: 1;
}

#bodytext {
  color: red;
  grid-row:2;
  grid-column: 2;
}

@media (max-width:600px) {
  #header {
    grid-column: 1 / span 2;
  }
  #thumbnail {
      grid-row:2;
      grid-column: 1;
  }
}

/* Additional Styling for Snippet */

#container > div { 
     background: #5548B0; 
     text-align: center; 
 }

<div id="container">
  <div id="header">Header Text</div>
  <div id="thumbnail">
    <a href="stackoverflow.com"><img src="https://loremflickr.com/320/240"></a>
  </div>
  <div id="bodytext">Some free-form text to be wrapped. Some free-form text to be wrapped. Some free-form text to be wrapped. Some free-form text to be wrapped.</div>
</div>

Seeking assistance with CSS - need to adjust block layout based on media query - considering using flexbox

Answer №1

Answer №2

Similar questions

What is the best way to link HTML transformations across several classes?

Stroke on SVG Rect disappears suddenly without explanation

The PHP/MySQLi registration form is displaying a blank white page without any visible output or error messages

Is it possible to replicate, modify, or recycle a purely HTML and CSS component in Angular?

Is it possible to emphasize a duration of 25 minutes on an analog clock by utilizing CSS gradients?

Heroku encounter an H14 error - "the absence of running web processes"

Adjusting the box sizing of a contentEditable DIV to conceal the first and last characters

How about adding various colors in the background with layers?

How can I find the last element that was selected using XPath in the browser console

Is JSF h:outputStylesheet converter the solution for creating dynamic CSS?

Binding iframes in Angular 6

How come the previous sibling element appears on top when the initial sibling is set to a position of absolute?

Personalizing the React Bootstrap date picker

Applying FadeIn Effect to Background Image on Hover

Obtain the value of a two-handle slider using jQuery

Looking for assistance with accessing elements using the "document.getElementById" method in Javascript

Prevent CSS3 columns from splitting paragraphs apart

Is it possible to create a masonry-style layout with two columns that is responsive without

Alignment issue with Bootstrap's vertical radio buttons

Tips for displaying only one image when clicked and hiding other divs: