Design a dynamic rectangular division using CSS and Bootstrap 4 that adapts to different screen sizes

Question

Design a dynamic rectangular division using CSS and Bootstrap 4 that adapts to different screen sizes

I am encountering difficulties attempting to replicate a full-width rectangle div on a website, particularly with issues related to responsiveness and mobility.

Here is an example of the design I am trying to recreate.

And here's what I've accomplished so far: example here.

The primary issue I'm facing is that the text does not fit inside the designated boxes as intended, especially when viewed on mobile devices.

Below is a snippet of my current HTML and CSS:

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;
}

#feline-ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

#feline-ul 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);
}

The problem arises in the second box where my texts do not align properly within a square/container, instead occupying full width.

html css

Answer 1

Answer №1

Just recreated the structure to demonstrate a minimal example.

In summary, your bootstrap code is not properly nested.

What have I changed? I enclosed the row within a container. A container wraps all rows within it. There are two types of containers: .container and .container-fluid, with the latter being for full-width layouts. Below the container is a row, which is always divided into 12 parts in bootstrap. You can specify the number of columns for each display width. Refer to the width breakpoints in the bootstrap grid documentation. It is crucial to avoid nesting a .row within another .row. A row should always be a parent of a column. If you resize the example, you will see that the two columns (.col-md-8 and .col-md-4) adjust to two 12-width columns on smaller devices.

If you have key-value data pairs, using tables instead of lists is recommended. This is more semantically appropriate. Lists are typically used for enumerations like shopping lists, whereas tables are better suited for object-oriented formatting (starting from one attribute), such as a dish with 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

Just recreated the structure to demonstrate a minimal example.

In summary, your bootstrap code is not properly nested.

What have I changed? I enclosed the row within a container. A container wraps all rows within it. There are two types of containers: .container and .container-fluid, with the latter being for full-width layouts. Below the container is a row, which is always divided into 12 parts in bootstrap. You can specify the number of columns for each display width. Refer to the width breakpoints in the bootstrap grid documentation. It is crucial to avoid nesting a .row within another .row. A row should always be a parent of a column. If you resize the example, you will see that the two columns (.col-md-8 and .col-md-4) adjust to two 12-width columns on smaller devices.

If you have key-value data pairs, using tables instead of lists is recommended. This is more semantically appropriate. Lists are typically used for enumerations like shopping lists, whereas tables are better suited for object-oriented formatting (starting from one attribute), such as a dish with 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 3

Answer №2

It seems that the code example provided is quite complex. Here's an alternate approach I would suggest:

.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>

Answer 4

It seems that the code example provided is quite complex. Here's an alternate approach I would suggest:

.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>

Design a dynamic rectangular division using CSS and Bootstrap 4 that adapts to different screen sizes

Answer №1

Answer №2

Similar questions

Issue with maplace.js preventing the display of the Google map

Issues with Google maps are causing multiple maps to malfunction

Dealing with h2 text overflowing within a bordered container

Is there a way for me to display a gif similar to 9GAG on my

Center align the label and textbox using CSS in a horizontal arrangement

Adding a half circle connector in HTML can be accomplished by using SVG (Scal

Accessing the facebox feature within a dropdown menu

Ensure that all of the <li> elements within a <ul> container have equal widths

Utilize Node JS to assign variables to HTML form inputs

I'm having trouble getting my innerHTML command to update anything on the webpage, and the reason is eluding me

Determine if offcanvas element is visible upon initialization in Bootstrap 5 Offcanvas

Using jQuery, wrap two specific HTML elements together

Using AngularJs to have two ui-views on a single page

Unable to display favicon when using the include function

Waveform rendering in HTML5 using wavesurfer.js struggles to handle large mp3 files

FadeOut Television static on Canvas after a period of inactivity

Even with a highly lenient Content Security Policy in place, I continue to encounter violation errors

Master the Art of Scrollbar Control in Angular!

Exploring the integration of Selenium WebDriver with a Polymer website and its Shadow root functionality

Is there a way for me to position my arrow beside the header while still keeping the toggle function intact?