Create a responsive rectangle div with CSS and Bootstrap 4 - html

Question

I am trying to replicate a full-width rectangle div on a website but I'm having problems with responsiveness and mobility.
Here's an example of what I'm trying to replicate.
And here's what I have so far.
The problem is that the text won't go inside the separate boxes and it breaks in mobile version.
Here's my snippet:
HTML
<div class="row remove-container">
<div class="speech-bubble1 test-text">
<div class="row">
<h3 class="strong-text felinetitle">ADD</h3>
</div>
<div class="row">
<ul id="feline-ul">
<li>
<h6>Heartworm Test</h6>
</li>
<li>
<h6>$25</h6>
</li>
</ul>
</div>
</div>
<div class="speech-bubble speech-bubble-top">
<div class="container" style="padding-top: 35px; padding-bottom: 35px;">
<h3 class="strong-text felinetitle2">
A LA CARTE </h3>
<div class="row">
<div class="col-lg-9">
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-sm-6">
DHPP or DHLPP
</div>
<div class="col-sm-6">
Canine Flu
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.speech-bubble {
position: relative;
background-color: #045faf;
width: 100%;
height: 150px;
color: white;
text-align: center;
font-family: sans-serif;
}
.speech-bubble1 {
position: absolute;
background-color: #045faf;
width: 32%;
height: 150px;
left: 0;
color: white;
text-align: center;
z-index: 1;
font-family: sans-serif;
}
.remove-container {
margin: 0 !important;
padding: 0 !important;
}
.serviceprice {
display: flex;
justify-content: center;
padding-top: 50px;
}
.speech-bubble {
position: relative;
background-color: #045faf;
width: 100%;
height: 150px;
color: white;
text-align: center;
font-family: sans-serif;
}
.speech-bubble1 {
position: absolute;
background-color: #045faf;
width: 32%;
height: 150px;
left: 0;
color: white;
text-align: center;
z-index: 1;
font-family: sans-serif;
}
.remove-container {
margin: 0 !important;
padding: 0 !important;
}
.serviceprice {
display: flex;
justify-content: center;
padding-top: 50px;
}
#feline-ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#feline-ul li{
float: left;
margin-left: 70px;
}
#feline-ul2{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#feline-ul2 li{
float: left;
margin-left: 70px;
}
.test-text{
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-shadow: 18px 0px 35px -23px rgba(0,0,0,0.52);
box-shadow: 18px 0px 35px -23px rgba(0,0,0,0.52);
}
I'm having problems on the second box with my texts not compressing into a square/container. It just goes full width.

Answer 1

I just recreated your structure to show you an minimal example.
tl;dr; Your bootstrap code is not property nested.
What did i do?
I wrapped the row into a container. A container is the element which wraps all rows in it. There is a .container and .container-fluid where the .container-fluid is for full-width layouts. Below a container is a row. A row is always split into 12 parts in bootstrap. You can specify the amount of columns for each display width. Read up on the width breakpoints at the bootstrap grid doc. You will NEVER want to have a .row with a nested .row. A row is always a parent of a column. If you resize my example you will notice that these two columns (.col-md-8 and .col-md-4) are resizing to two 12-width column on small size devices.
And if you have key-value pairs as data i'd recommend to use tables instead of listings. This is just a semantical tip. A list covers just an enumeration like a shopping list. Instead a table is suited for object-like formatting (starting at one attribute): e.g. a dish which has a price.
*{
color: white;
}
footer{
background-color: #045faf;
padding: 20px;
}
#footer--left, #footer--right{
padding: 0 20px;
}
#footer--left{
-webkit-box-shadow: 18px 0px 35px -23px rgba(0,0,0,0.52);
box-shadow: 18px 0px 35px -23px rgba(0,0,0,0.52);
}
table{
width: 100%;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<footer>
<div class="container">
<div class="row">
<div id="footer--left" class="col-md-4">
<h3>Some Head Text</h3>
<table>
<tr>
<td>Value</td>
<td>25$</td>
</tr>
</table>
</div>
<div id="footer--right" class="col-md-8">
<h3>Some Head Text</h3>
<table>
<tr>
<td>Value</td>
<td>25$</td>
</tr>
</table>
</div>
</div>
</div>
</footer>

Answer 2

Well, your example of code appears to me too overloaded. I would do in this way:
.blocks {
width: 100%;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.blocks .block {
border: 1px solid #000;
height: 150px;
}
.blocks .block h3 {
text-align: center;
padding: 0;
margin: 0;
}
.blocks .block ul {
list-style-type: none;
padding-left: 0;
}
.blocks .block ul li {
padding: 0 0 0 15px;
margin: 0;
}
.blocks .block ul li:nth-child(1n) {
display: inline;
}
.blocks .block:first-child {
width: 33%;
}
.blocks .block:last-child {
width: 66%;
}
<div class="blocks">
<div class="block">
<h3>Add</h3>
<ul>
<li>Service 1</li>
<li>5$</li>
<br>
<li>Service 2</li>
<li>10$</li>
<br>
<li>Service 3</li>
<li>15$</li>
</ul>
</div>
<div class="block">
<h3>Add</h3>
<ul>
<li>Service 1</li>
<li>5$</li>
<br>
<li>Service 2</li>
<li>10$</li>
<br>
<li>Service 3</li>
<li>15$</li>
</ul>
</div>
</div>