Changes

5 bytes added ,  10:33, 5 March 2023
no edit summary
Line 1: Line 1: −
<div class="container">
+
<div class="container" style="display: flex; flex-wrap: wrap; justify-content: space-between;">
   <div class="column">
+
   <div class="column" style="flex-basis: calc(33.33% - 20px); margin-bottom: 20px;">
     <div class="content">
+
     <div class="content" style="background-color: #f2f2f2; padding: 20px;">
 
       <h2>Column 1</h2>
 
       <h2>Column 1</h2>
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit enim, non ultrices dolor scelerisque id. Integer auctor nunc purus, ac suscipit lectus tristique eu.</p>
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit enim, non ultrices dolor scelerisque id. Integer auctor nunc purus, ac suscipit lectus tristique eu.</p>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
   <div class="column">
+
   <div class="column" style="flex-basis: calc(33.33% - 20px); margin-bottom: 20px;">
     <div class="content">
+
     <div class="content" style="background-color: #f2f2f2; padding: 20px;">
 
       <h2>Column 2</h2>
 
       <h2>Column 2</h2>
 
       <p>Phasellus accumsan lobortis magna, a ultricies sapien hendrerit id. Vestibulum sed lorem id libero lobortis aliquam in vitae enim. Ut ornare dapibus velit, eget egestas enim bibendum ac.</p>
 
       <p>Phasellus accumsan lobortis magna, a ultricies sapien hendrerit id. Vestibulum sed lorem id libero lobortis aliquam in vitae enim. Ut ornare dapibus velit, eget egestas enim bibendum ac.</p>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
   <div class="column">
+
   <div class="column" style="flex-basis: calc(33.33% - 20px); margin-bottom: 20px;">
     <div class="content">
+
     <div class="content" style="background-color: #f2f2f2; padding: 20px;">
 
       <h2>Column 3</h2>
 
       <h2>Column 3</h2>
 
       <p>Curabitur vel neque vel tortor accumsan bibendum. Nullam a mauris ipsum. Nullam ullamcorper, mauris ac vehicula varius, turpis purus aliquet est, eget pretium odio urna eu enim.</p>
 
       <p>Curabitur vel neque vel tortor accumsan bibendum. Nullam a mauris ipsum. Nullam ullamcorper, mauris ac vehicula varius, turpis purus aliquet est, eget pretium odio urna eu enim.</p>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
  −
{{#CSS:
  −
  <style>
  −
    .container {
  −
      display: flex;
  −
      flex-wrap: wrap;
  −
      justify-content: space-between;
  −
    }
  −
    .column {
  −
      flex-basis: calc(33.33% - 20px);
  −
      margin-bottom: 20px;
  −
    }
  −
    .content {
  −
      background-color: #f2f2f2;
  −
      padding: 20px;
  −
    }
  −
    @media only screen and (max-width: 768px) {
  −
      .column {
  −
        flex-basis: 100%;
  −
      }
  −
    }
  −
  </style>
   
</div>
 
</div>
}}