News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Simple Question about making divs responsive

Started by Grammy, March 25, 2024, 08:13:16 AM

Previous topic - Next topic
Print
Go Down Pages1
User actions

Grammy

March 25, 2024, 08:13:16 AM
Hi, guys.   :)

The code below does what I want, as far as making two equal divs that stay the same height, regardless of content.  But I'd like for them to stack and be 100% when a screen is less than 600px. I'm just not getting that to happen.  The last thing I tried was to display the two columns as blocks when the max screen is 600px, but no go.  Can anybody tell me what I need to do to duct tape this thing together?  Please and thank you. 

Code Select
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>Creating Two Equal Height Columns Using CSS</title>
<style>
.flex-container{
width: 80%;
min-height: 300px;
margin: 0 auto;
display: -webkit-flex; /* Safari */
display: flex;
}
.flex-container .column{
padding: 10px;
background: #dbdfe5;
-webkit-flex: 1; /* Safari */
-ms-flex: 1; /* IE 10 */
flex: 1;
}
.flex-container .column.bg-alt{
background: #b4bac0;
}

  }
   @media screen and (max-width: 600px;) {
    .column .column.bg-alt {
    max-width: 100%;
      display: block;
    }
  }
</style>
</head>
<body>
    <div class="flex-container">
        <div class="column"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non orci ut ligula convallis lobortis at ac neque. Mauris pharetra eget magna at aliquam. Sed posuere feugiat diam, sit amet sagittis urna vehicula eleifend. Nunc dictum orci et mi mattis luctus. Integer luctus dignissim enim, sollicitudin volutpat ante. Pellentesque hendrerit sit amet metus vel dignissim. Phasellus cursus placerat neque, vitae facilisis nunc dictum at. Suspendisse fringilla porta tortor, ut posuere est tempus eu. Praesent efficitur tincidunt purus a condimentum. Mauris varius magna a semper hendrerit.

Morbi in pretium erat, at faucibus mauris. Etiam viverra eleifend augue, ac scelerisque lectus lobortis eu. In sit amet egestas odio. Maecenas cursus finibus magna, ut varius ipsum interdum sed. Donec vitae massa sed neque elementum tincidunt. Cras euismod ligula est, at iaculis odio mollis eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse at eros vitae lacus accumsan fermentum quis non magna. Etiam tortor nunc, viverra sit amet nisi ac, ullamcorper bibendum enim. Praesent at convallis lacus, a laoreet elit. Donec et pharetra elit. Ut vitae est a erat tempus ultrices nec eu ante. In dignissim dolor sed ex elementum, et tristique est scelerisque. Pellentesque eros tortor, aliquet a lacus sed, feugiat auctor nunc. In non dolor ultrices, tempus ex sit amet, porttitor augue.

Fusce in mauris eu enim feugiat feugiat. Pellentesque et iaculis ipsum, in feugiat justo. Sed nec massa in augue malesuada auctor non congue mauris. Suspendisse et sapien in ipsum venenatis gravida a in magna. Vestibulum ornare egestas libero quis finibus. In malesuada auctor luctus. Cras non ipsum in sem malesuada condimentum quis eget purus. Nam molestie erat turpis, nec interdum massa ornare eu. Nullam sodales arcu nibh, non viverra leo consectetur nec. Donec quis dui at ex efficitur fringilla vitae id sapien. Cras nisi augue, bibendum at tortor sed, pulvinar imperdiet ipsum. Proin tincidunt efficitur dui, et pretium ante faucibus vel. Pellentesque vel rutrum velit, at aliquam diam. Morbi eget leo convallis, lacinia orci eget, posuere mauris. Duis auctor auctor ultrices. Morbi vel arcu orci. </div>
        <div class="column bg-alt"> Nullam euismod laoreet nibh, at faucibus felis placerat eget. Proin quis euismod sem. Donec quis sem eleifend, lobortis mi eget, accumsan metus. In tellus velit, malesuada ut mauris vel, gravida pulvinar metus. Cras non est erat. Ut ut diam risus. Nam volutpat, erat feugiat feugiat malesuada, felis dui dictum risus, id ultricies arcu neque venenatis risus. Praesent libero odio, consequat vitae ex eget, pretium faucibus mi. Morbi nisl augue, ultrices sollicitudin odio eu, lobortis mattis augue. Mauris vitae lacus ut tellus ornare finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec eget auctor turpis, ut rutrum massa. Vivamus at iaculis lectus.

Quisque ornare id lacus non dictum. Aliquam eget vulputate sem, at auctor leo. Duis auctor imperdiet dignissim. Nulla consectetur libero at fringilla finibus. Etiam laoreet accumsan bibendum. Vestibulum sed iaculis tellus. Nullam porta risus augue. Nunc eget risus vestibulum, elementum mi eget, ullamcorper quam. </div>
    </div>
</body>
</html>

Grammy

#1
March 25, 2024, 01:18:51 PM
Never mind, guys, I kept messing with it and sorted it adding
Code Select
flex-direction: row to the container and then adding this media query:

Code Select
@media (max-width: 600px) {
  .flex-container {
    flex-direction: column;
  }
}
As you were.   :)

Steve

#2
March 26, 2024, 07:57:23 AM
Quote from: Grammy on March 25, 2024, 01:18:51 PMAs you were.
* lying back down *    :P
DO NOT pm me for support!

Jaqueline22

#4
April 04, 2024, 07:17:28 AM Last Edit: April 04, 2024, 07:46:50 AM by Steve
Quote from: Grammy on March 25, 2024, 08:13:16 AMHi, guys.  :)

The code below does what I want, as far as making two equal divs that stay the same height, regardless of content.  But I'd like for them to stack and be 100% when a screen is less than 600px. I'm just not getting that to happen.  The last thing I tried was to display the two columns as blocks when the max screen is 600px, but no go.  Can anybody tell me what I need to do to duct tape this thing together?  Please and thank you. 

Code Select
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>Creating Two Equal Height Columns Using CSS</title>
<style>
.flex-container{
    width: 80%;
    min-height: 300px;
    margin: 0 auto;
    display: -webkit-flex; /* Safari */       
    display: flex;
}
.flex-container .column{
    padding: 10px;
    background: #dbdfe5;
    -webkit-flex: 1; /* Safari */
    -ms-flex: 1; /* IE 10 */
    flex: 1;
}
.flex-container .column.bg-alt{
    background: #b4bac0;
}

  }
  @media screen and (max-width: 600px;) {
    .column .column.bg-alt {
    max-width: 100%;
      display: block;
    }
  }
</style>
</head>
<body>
    <div class="flex-container">
        <div class="column"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non orci ut ligula convallis lobortis at ac neque. Mauris pharetra eget magna at aliquam. Sed posuere feugiat diam, sit amet sagittis urna vehicula eleifend. Nunc dictum orci et mi mattis luctus. Integer luctus dignissim enim, sollicitudin volutpat ante. Pellentesque hendrerit sit amet metus vel dignissim. Phasellus cursus placerat neque, vitae facilisis nunc dictum at. Suspendisse fringilla porta tortor, ut posuere est tempus eu. Praesent efficitur tincidunt purus a condimentum. Mauris varius magna a semper hendrerit.

Morbi in pretium erat, at faucibus mauris. Etiam viverra eleifend augue, ac scelerisque lectus lobortis eu. In sit amet egestas odio. Maecenas cursus finibus magna, ut varius ipsum interdum sed. Donec vitae massa sed neque elementum tincidunt. Cras euismod ligula est, at iaculis odio mollis eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse at eros vitae lacus accumsan fermentum quis non magna. Etiam tortor nunc, viverra sit amet nisi ac, ullamcorper bibendum enim. Praesent at convallis lacus, a laoreet elit. Donec et pharetra elit. Ut vitae est a erat tempus ultrices nec eu ante. In dignissim dolor sed ex elementum, et tristique est scelerisque. Pellentesque eros tortor, aliquet a lacus sed, feugiat auctor nunc. In non dolor ultrices, tempus ex sit amet, porttitor augue.

Fusce in mauris eu enim feugiat feugiat. Pellentesque et iaculis ipsum, in feugiat justo. Sed nec massa in augue malesuada auctor non congue mauris. Suspendisse et sapien in ipsum venenatis gravida a in magna. Vestibulum ornare egestas libero quis finibus. In malesuada auctor luctus. Cras non ipsum in sem malesuada condimentum quis eget purus. Nam molestie erat turpis, nec interdum massa ornare eu. Nullam sodales arcu nibh, non viverra leo consectetur nec. Donec quis dui at ex efficitur fringilla vitae id sapien. Cras nisi augue, bibendum at tortor sed, pulvinar imperdiet ipsum. Proin tincidunt efficitur dui, et pretium ante faucibus vel. Pellentesque vel rutrum velit, at aliquam diam. Morbi eget leo convallis, lacinia orci eget, posuere mauris. Duis auctor auctor ultrices. Morbi vel arcu orci. </div>
        <div class="column bg-alt"> Nullam euismod laoreet nibh, at faucibus felis placerat eget. Proin quis euismod sem. Donec quis sem eleifend, lobortis mi eget, accumsan metus. In tellus velit, malesuada ut mauris vel, gravida pulvinar metus. Cras non est erat. Ut ut diam risus. Nam volutpat, erat feugiat feugiat malesuada, felis dui dictum risus, id ultricies arcu neque venenatis risus. Praesent libero odio, consequat vitae ex eget, pretium faucibus mi. Morbi nisl augue, ultrices sollicitudin odio eu, lobortis mattis augue. Mauris vitae lacus ut tellus ornare finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec eget auctor turpis, ut rutrum massa. Vivamus at iaculis lectus.

Quisque ornare id lacus non dictum. Aliquam eget vulputate sem, at auctor leo. Duis auctor imperdiet dignissim. Nulla consectetur libero at fringilla finibus. Etiam laoreet accumsan bibendum. Vestibulum sed iaculis tellus. Nullam porta risus augue. Nunc eget risus vestibulum, elementum mi eget, ullamcorper quam. </div>
    </div>
</body>
</html>
The media query syntax is incorrect. It should not have parentheses after the max-width value.
In your media query, the class selector .column .column.bg-alt is incorrect. It should just be .column.bg-alt.
You want the columns to stack on top of each other for screens less than 600px, so you need to set the flex-direction to column in the media query.
To make the columns full-width when stacking, you need to set their width to 100%.
Here's the corrected CSS:

Code Select
.flex-container {
    width: 80%;
    min-height: 300px;
    margin: 0 auto;
    display: flex;
}

.flex-container .column {
    padding: 10px;
    background: #dbdfe5;
    flex: 1;
}

.flex-container .column.bg-alt {
    background: #b4bac0;
}

@media screen and (max-width: 600px) {
    .flex-container {
        flex-direction: column;
    }
    .flex-container .column {
        width: 100%;
    }
}
Reagrds : namecombiner


Please use code tags when posting code ~ Steve
Print
Go Up Pages1
User actions
Advertisement: