Skip to main content
maryanns50585047
maryanns50585047
Known Participant
October 9, 2020
Question

Div Containers not coded correctly?

  • October 9, 2020
  • 3 replies
  • 630 views

I have been trying to set this page up with responsive div containers. While they are responsive, they do not respond to resizing when I change 3/3/3/3 to 6/6. Don't understand what I have missed.

 

Also, when I put text in the 4th column, the div thumbnails distort. I am attaching a screen shot of the distortion. The columns all become very small and the containers are not lining up. The page is located at https://trishakeel.com/PresentationPackages.html

 

Thanking in advance as I have been wrestling this ALL DAY! 

This topic has been closed for replies.

3 replies

O
osgood_
Legend
October 9, 2020

I dont see an issue either, in terms of what you are describing in your post, it is more about col 3 not clearing col 4 on a smaller width device. Youre using Bootstrap so maybe Nancy can give you some instructions about clearing <div>s in that framework. I'd be looking to use a more up-to-date method like grid or flex to lay the columns out, where clearing wont be an issue.

O
osgood_
Legend
October 9, 2020

As I can't correct (edit) my previous post......it should read....

 

'it is more about col 3 not clearing col 1 on a smaller width device.'

 

 

 

 

maryanns50585047
maryanns50585047Author
Known Participant
October 9, 2020

Did you look at the screen shot? This is what happens if I put equal amounts of text in the 4th column. also, if I change the div to be 6, the size of the div does not change…

 

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
October 9, 2020

I can't reproduce what's in your screenshot, sorry.  Try using a different browser.

 

Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
October 9, 2020

Looks OK to me on desktop Firefox.  Try clearing your browser's cache & history.  Also test with various browsers and zoom settings.

 

 

Incidentally, Bootstrap 4 supports Flexbox which makes equal height columns a breeze.  You might want to investigate that.

https://codepen.io/ondrejsvestka/pen/gWPpPo

 

Nancy O'Shea— Product User & Community Expert
maryanns50585047
maryanns50585047Author
Known Participant
October 9, 2020

LOVE Flexbox...thanks. that resolved a lot, but I still need to put the flexboxes in a container so they will be the same width as the elements above them. Here is current code. Do I need to add a container to wrap around the flexboxes??

 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TrishaKeel.com</title>
<link href="css/simpleGridTemplate.css" rel="stylesheet" type="text/css">
<!-- <link href="css/bootstrap-3.4.1.css" rel="stylesheet" type="text/css"> -->
<link href="css/bootstrap-4.4.1.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<![endif]-->
</head>
<body>
<!-- Main Container -->
<div class="container"> 
  <a href="images.tk/PFL2020BannerShort.jpg"><img src="images.tk/PFL2020BannerShort.jpg" class="img-fluid" alt="PortLux"></a>  <!-- Header -->
   <header class="header">
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Portal Fiat Lux Training</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
   <div class="collapse navbar-collapse" id="navbarSupportedContent1">
     <ul class="navbar-nav mr-auto">
     <li class="nav-item active"> <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> </li>
      
 <li class="nav-item"> <a class="nav-link" href="About.html">About</a> </li>
      
         <li class="nav-item"> <a class="nav-link" href="PresentationPackages.html">Presentation Packages</a> </li>
 
         <li class="nav-item"> <a class="nav-link" href="Training.html">Training</a> </li>
 
  <li class="nav-item"> <a class="nav-link" href="TeamMembers.html">Team Members</a> </li>
 
    <li class="nav-item"> <a class="nav-link" href="ContactUs.html">Contact Us</a> </li>
 
 
</ul>
   </div>
    </nav>
<h4 class="logo">PRESENTATION PACKAGES
</h4>
 
  </header>
  <!-- Hero Section -->
  <section class="intro">
 
<body>
  <div class="container">
    <div class="row row-flex">
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="content colour-1">
          <h3>Give your Employees an <br>
   EMPOWERMENT RECHARGE!</h3>
          Morning Keynote Session (2 hours)<br>
   Reclaiming Your Space at Work and at Home <br>
<strong><br>
         Afternoon Power Transfers (30 minutes each)&nbsp;</strong>&nbsp;<br>
   Reading Faces Above the Mask: Eyebrows Reveal<br>
   Door Reading: What You Know Before You Enter<br>
   Body Language Cues: The Eyes Never Lie<br>
   Virtual Stages: Backgrounds on Background<br>
   Virtual Masks: Which Face Are You Really Wearing?<br>
   <br>
  <strong>Afternoon Keynote Session (90 minutes)<br>
  </strong>Remembering Your Personal Power...RAHR!!&nbsp;<br>
        </div>
      </div>
 
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="content colour-2">
          <h3>The Amazing Results<br>
of APPRECIATION!</h3>
          <p> Morning Keynote Session (2 hours)<br>
   The Magic of You at WORK&nbsp; <br>
<strong><br>
         Afternoon Power Transfers (30 minutes each)&nbsp;</strong>&nbsp;<br>
         <strong> <em> Design Your Own Presentation Package:</em><br>
         </strong> Select from the Team Member's Offerings <br>
Five 30 minute Power Transfers OR<br>
   Three 50 minute Power Transfers<br>
   Mix and Match Your Choices&nbsp; &nbsp;<br>
   <br>
  <strong>Afternoon Keynote Session (90 minutes)<br>
  </strong>Responsibility Returns the Reins&nbsp; &nbsp;&nbsp;<br></p>
        </div>
      </div>
 
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="content colour-3">
          <h3>Engaged Employees<br>
LEAD BY EXAMPLE!</h3>
          <p> Morning Keynote Session (2 hours)<br>
   The Brilliant Light of the Group Dynamic&nbsp; &nbsp; <br>
<strong><br>
         Afternoon Power Transfers (30 minutes each)&nbsp;</strong>&nbsp;<br>
         <strong> <em> Design Your Own Presentation Package:</em><br>
         </strong> Select from the Team Member's Offerings <br>
Five 30 minute Power Transfers OR<br>
   Three 50 minute Power Transfers<br>
   Mix and Match Your Choices&nbsp; &nbsp;<br>
   <br>
  <strong>Afternoon Keynote Session (90 minutes)<br>
  </strong>Success Breeds Success&nbsp;<br></p>
        </div>
      </div>
 
 
    <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="content colour-4">
          <h3>Engaged Employees<br>
LEAD BY EXAMPLE!</h3>
          <p> Morning Keynote Session (2 hours)<br>
   The Brilliant Light of the Group Dynamic&nbsp; &nbsp; <br>
<strong><br>
         Afternoon Power Transfers (30 minutes each)&nbsp;</strong>&nbsp;<br>
         <strong> <em> Design Your Own Presentation Package:</em><br>
         </strong> Select from the Team Member's Offerings <br>
Five 30 minute Power Transfers OR<br>
   Three 50 minute Power Transfers<br>
   Mix and Match Your Choices&nbsp; &nbsp;<br>
   <br>
  <strong>Afternoon Keynote Session (90 minutes)<br>
  </strong>Success Breeds Success&nbsp;<br></p>
        </div>
      </div>
 
    
   </div> 
  </div>
</body>  
 
  </section>
  <!-- Footer Section -->
  <footer id="contact">
    <p class="hero_header">GET IN TOUCH WITH ME</p>
    <div class="button"><a href="mailto:trishakeel@tomorrowskey.com">EMAIL ME</a></div>
  </footer>
  <!-- Copyrights Section -->
  <div class="copyright">&copy;2020 - <strong>Portal Fiat Lux Training Group</strong></div>
</div>
<!-- Main Container Ends -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
</body>
</html>

 

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices