When the size is reduced, the content spills out of the div

I made a div container and added some callouts inside it.

You can find my code uploaded here https://codepen.io/muhammad-usman-the-animator/pen/mKgoNj 

.name {
  color: black;
  font-weight: bold;
  margin-left: 20px;
  font-size: 20px;
}

.details {
  color: black;
  margin-left: 20px;
  font-size: 15px;
}

h2 {
  margin-top: 100px;
  margin-left: 100px;
  margin-bottom: -100px;
}

.vl {
  border-left: 6px solid #3B4F48;
  height: 120px;
  margin-bottom: none;
  margin-top: -15px;
  margin-left: 120px;
}

.circle {
  border: 4px solid black;
  border-radius: 100%;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  opacity: 0.6;
  -webkit-box-shadow: 0 0 1px 0px rgb(255, 255, 255);
  box-shadow: 0 0 1px 0px rgb(255, 255, 255);
  width: 17px;
  height: 17px;
  z-index: 86;
  margin-left: 114.2px;
  margin-bottom: 0px;
  background-color: #84a499;
}

.hr {
  margin-left: 130px;
  margin-top: -13px;
  width: 249px;
  border-top: 8.2px solid #3B4F48;
}

body {
  font-family: Helvetica;
  font-size: 13px;
}

div.callout {
  height: 60px;
  width: 200px;
  float: left;
}

div.callout {
  background-color: #84a499;
  background-image: -moz-linear-gradient(top, #444, #444);
  position: relative;
  color: #ccc;
  margin: 25px;
  min-height: 100px;
  border: 1px solid #333;
  text-shadow: 0 0 1px #000;
  width: 700px;
  margin-top: -58px;
  margin-left: 397px;
  border-radius: 15px;
  /*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}

.callout::before {
  content: "";
  width: 0px;
  height: 0px;
  border: 0.8em solid transparent;
  position: absolute;
}

.callout.right::before {
  left: -20px;
  top: 40%;
  margin-left: -5px;
  border-right: 15px solid #84a499;
}

h2 {
  width: 80%;
  float: center;
  text-align: center;
  border-bottom: 6px solid #3B4F48;
  line-height: 0.1em;
  margin: 10px 0 20px;
}

h2 span {
  background: #292c2f;
  padding: 0 40px;
  padding-bottom: 20px;
  border-bottom: 6px solid #3B4F48;
}

.para {
  color: white;
  margin-top: 180px;
  margin-bottom: -200px;
  margin-left: 120px;
  font-size: 17px;

}
<div id="Events" name="Events"> </div>
<div class="wrapper offcanvas-container" id="offcanvas-container">
  <!-- inner-wrapper -->

  <!-- Services Wrapper Section -->
  <section class="service-wrapper" style="background-color: #292c2f;">

    <div class="container-fluid">

      <h2><span style="color: white;">Work</span></h2>
      <p class="para"> My career has taken a natural progression from client websites, to UI templates, to simple php websites, to Laravel framework.</p>
      <div class="vl" style="margin-top:250px; height: 80px;"></div>
      <div class="circle"> </div>
      <div class="callout right" style>

        <div style="margin-top: 10px;"> <a class="name"> Wizkon International</a> <br>

          <p class="details"> this has been love and lakjfofiejalifjlsdjaie jaleijlsidjleai jlaifjlsdf jalie jlaidjf ewf lakjfofiejalifjlsdjaie j lakjfofiejalifjlsdjaie jlaidjf lakjfofiejalifjlsdjaie j
          </p>

        </div>

      </div>

      <hr class="hr" />

      <div class="vl" style="height: 80px; margin-bottom: 50px;"></div>
      
    </div>
  
  </section>

</div>

The issue I'm facing is that everything works fine normally, but when I resize the window, the callouts exceed the size of the containing div. I've tried several things but nothing seems to work. Any guidance on how I can resolve this would be greatly appreciated.

htmlcssbootstrap-4

Answer №1

Instead of setting the width in pixels for callout to 700px, try applying a 40% width for the div. Take a look at it when you get a chance.

.name{

  color: black; 
  font-weight: bold;
  margin-left: 20px;
   font-size: 20px; 
}

    
.details{

  color: black; 
  margin-left: 20px;
   font-size: 15px; 
}

h2  {
margin-top:100px; margin-left: 100px; margin-bottom:-100px;
}



.vl {
  border-left: 6px solid #3B4F48;
  height: 120px;
  margin-bottom: none;
  margin-top: -15px;
  margin-left: 120px;
}

.circle {
  border: 4px solid black;
  border-radius: 100%;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  opacity: 0.6;
  -webkit-box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
  box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
  width: 17px;
  height: 17px;
  z-index: 86;
  margin-left: 114.2px;
  margin-bottom:0px;
  background-color: #84a499;

}

.hr{
margin-left:130px;
margin-top:-13px; 
width:249px;
border-top: 8.2px solid #3B4F48;


}


body {
  font-family: Helvetica;
  font-size: 13px;
}

div.callout {
  height: 60px;
  width: 200px;
  float: left;
}

div.callout {
  background-color: #84a499;
  background-image: -moz-linear-gradient(top, #444, #444);
  position: relative;
  color: #ccc;
  
  margin: 25px;
  min-height: 100px;
  border: 1px solid #333;
  text-shadow: 0 0 1px #000;
  width: 40%;
  margin-top: -58px;
  margin-left:397px;

  border-radius:  15px;
  
  /*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}

.callout::before {
  content: "";
  width: 0px;
  height: 0px;
  border: 0.8em solid transparent;
  position: absolute;

}



.callout.right::before {
  left: -20px;
  top: 40%;
  margin-left: -5px;
  border-right: 15px solid #84a499;


}

h2 {
  width: 80%;
  
  float: center;

  text-align: center;

  border-bottom: 6px solid #3B4F48;
 
  line-height: 0.1em;
  margin: 10px 0 20px;
}

h2 span {
  background: #292c2f;
  padding: 0 40px;
  padding-bottom: 20px;
  border-bottom: 6px solid #3B4F48;
}


.para{
  color: white;
   margin-top: 180px;
    margin-bottom: -200px;
     margin-left: 120px;
     font-size: 17px;
}
  
<div id="Events" name="Events"> </div>
<div class="wrapper offcanvas-container" id="offcanvas-container">
    <!-- inner-wrapper -->

      <!-- Services Wrapper Section -->
      <section class="service-wrapper" style="background-color: #292c2f;"  >



<div class="container-fluid">

  <h2 ><span style="color: white;">Work</span></h2>
  <p class="para" > My career has taken a natural progression from client websites, to UI templates, to simple php websites, to Laravel framework. </p>
<div class="vl" style="margin-top:250px; height: 80px;"></div>
<div class="circle"> </div>
<div class="callout right" style> 

 <div style="margin-top: 10px;" > <a class="name" > Wizkon International</a> <br>

  <p class="details" > this has been love and lakjfofiejalifjlsdjaie jaleijlsidjleai jlaifjlsdf jalie jlaidjf ewf  lakjfofiejalifjlsdjaie j lakjfofiejalifjlsdjaie jlaidjf  lakjfofiejalifjlsdjaie j
  </p>

 </div>

 </div>
  
<hr class="hr"/>

<div class="vl" ></div>
<div class="circle"> </div>
<div class="callout right">   <div style="margin-top: 10px;" > <a class="name" > Wizkon International</a> <br>

  <p class="details" > this has been love and lakjfofiejalifjlsdjaie jaleijlsidjleai jlaifjlsdf jalie jlaidjf ewf  lakjfofiejalifjlsdjaie j lakjfofiejalifjlsdjaie jlaidjf  lakjfofiejalifjlsdjaie j
  </p>

 </div> </div>
<hr class="hr"/>


...

...

<hr class="hr"/>




<div class="vl" style="height: 80px; margin-bottom: 50px;" ></div>
</div>
</section>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to Repairing Uncaught TypeError: players.setAttribute is not a recognized method?

I'm a beginner and encountered an error saying Uncaught TypeError: players.setAttribute is not a function when submitting an action. How can I solve this issue? Please share your insights. ''' //selecting all necessary elements const s ...

javascripthtmlcss

Having trouble with your Bootstrap 4 Dropdown Menu?

I attempted to implement the dropdown menu example from Bootstrap 4, but unfortunately it does not seem to be working as expected. The dropdown menu does not appear when clicked. <li class="nav-item dropdown"> <a class="nav-link dropdown-to ...

javascriptcsshtmlbootstrap-4

Updating Bootstrap Indicators with jQuery on Click Event

Unfortunately, I am unable to share an image due to limited internet data. My goal is to switch each image to its sprite equivalent. There are three list items that I'm struggling to change because they each have two classes that need to be updated. ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is the click count feature malfunctioning?

My goal is to track every mouse click made by the user, so I created a function for this purpose. However, it seems that the function is only counting the first click. To store the count values, I have created a variable. <!DOCTYPE html PUBLIC "-//W3 ...

javascripthtml

How to Implement Multi Select Drag and Drop Feature in Angular 4?

Currently, I am implementing Angular 2 Drag-and-Drop from this library to enable the selection of list items using a drag and drop method. However, I have encountered issues with its functionality on touch devices and when attempting to perform multiple it ...

javascripthtmlangulardrag-and-drop

Hovering over an element and eliminating any extra space

Hey there, I'm looking for some assistance with removing the whitespace on hover. Below is the code along with a screenshot for reference: div.show_sizes_onhover { background: rgba(255,255,255,.9); bottom: -1px; color: #a1a1a1; left: 0; padding: 5px ...

htmlcsswebshop

Present Images and Text Alongside Each Other in a Grid Layout

My goal is to have an image and text displayed side by side, but for some reason they are appearing stacked on top of each other. https://i.stack.imgur.com/F8OXL.png If you want to take a look at the code I am using, here is the link to my CodePen: https: ...

htmlcss

The navigation bar extends beyond the container

First time diving into bootstrap and struggling with my items overflowing the container. Here's a snippet of my code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equi ...

htmlcssbootstrap-5

Maintaining Proper Header Dimensions

Having some issues with aligning my fixed widget and floating navigation. The fixed widget is not respecting the height of the floating navigation and is appearing at the top when in its fixed position. I'm currently using "Q2W3 Fixed Widget" for the ...

csscss-float

How to adjust background size for Iphone4 and Iphone5 simulators using only HTML5 and CSS3 code

Creating an HTML5 app for iPhone4 and 5 with a texture-rich background. I'm facing an issue where the texture image gets scaled and only the central part is visible, even though the image size is 640x960 and 640x1136. I've tried adding @2x at the ...

iphonehtmlcssmedia-queries

When a new VueJS project is created, it failed to automatically install the necessary basic HTML files and folders

Hey there, I am completely new to Vue.js. Just recently, I installed the Vue.js/CLI and created a brand new project using vue create test. This prompted me to choose from three options: > Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3 ...

javascripthtmlvue.jsvue-clijavascript-framework

Unable to access GDrive on Moodle with an iOS device

I have an iframe code that works in Android, but not on iOS when embedded in Moodle. Does anyone know how to fix this issue? <p><iframe src="https://drive.google.com/embeddedfolderview?id=1d-SHXhof2KnyTmMr2GowJuf4bVKFKQg3&amp;usp#list&q ...

htmliosiframemoodle

Reopen a Kendo UI dialog

Currently, I am utilizing Kendo UI, and my goal is to display a modal dialog when a button is clicked. The issue I am facing is that it works perfectly the first time around. However, upon closing the dialog and attempting to reopen it by clicking the butt ...

javascriptjqueryhtmlkendo-ui

The sorting of elements using the jQuery sort() function encounters issues on webkit browsers

Looking for a solution to sort elements by a number? Consider this part of a function that does just that. The number used for sorting is fetched from a data-ranking attribute of the element: $(".tab_entry").sort(function(a,b){ return parseFloat(a.dat ...

javascriptjquerycsssortingwebkit

A guide on incorporating a set of components to be utilized as custom HTML elements in Angular

I am in the process of revamping my application to be more modular on the UI side, with a focus on separating different elements including: App header Left navigation panel Main content on the right side of the nav panel I have successfully figured out ...

htmlangulartypescript

My string is being cut off due to the HTML value

My webpage utilizes HTML5 to enable file uploads directly from the browser. The uploaded file is a PDF that needs to be displayed within an <input type="text"/> The following is my code snippet: var files = evt.target.files; // FileList object // ...

javascripthtmlinputtruncate

Avoiding code duplication in Angular: tips for optimizing functions

Is there a way to avoid repeating the same for loop for a second variable and use only one? I'm trying to apply the "Don't repeat yourself" method here. Should I consider using an array? JS: var app=angular.module('xpCalc', []); app.c ...

javascripthtmlangularjsfunctiondry

Avoid automatic semicolon insertion in Visual Studio Code

Currently, I am utilizing Visual Studio Code for my coding tasks. I specifically do not prefer the auto insertion of semicolons after CSS properties by VS Code. However, it keeps providing me with an autocomplete option that I find undesirable. Is there a ...

cssvisual-studio-codeautocomplete

Revealing the Contents of a View Selection in an HTML DIV

By setting my DIV to contenteditable = true, I am able to capture images from the clipboard. After pasting the image, I can view the base64 value by right-clicking and selecting View Selection Source. Copying and saving this base64 value allows me to see t ...

htmlimage