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

Guide on incorporating HTML data into an existing webpage

Show all entries belonging to a specific ID on individual rows for each ID using PHP

Ways to perform a CSS redirection

A guide on incorporating jQuery alert messages into Angular 2

shard: the dropdown menu can be interacted with by clicking, but the options

Optimal method for storing large arrays of numbers in localStorage using JavaScript

Designing a search form to browse through the database by entering a specific title

Vertical Alignment Challenge in Bootstrap Container

What steps are necessary to activate javascript in HTML for WebView?

Appending a row to a table will not trigger events in Select2

A error was encountered stating that the formValidation function is not defined when the HTML form element is submitted

Show table information from backend operations

What is the best way to right-align a label in a vertical MUI Slider in ReactJS?

Make sure all Bootstrap elements have square edges

Ways to customize hover color of Bootstrap 5 Dropdown menu

Transitioning the height of a webpage element from a fixed value to fit the content dynamically

Keeping the Bootstrap popover anchored to the content

After clicking, I would like the text from the list item to have a style of "background-color: aqua" when displayed in the textarea

Adding HTML elements dynamically using jQuery: A how-to guide

Error alert: Blinking display, do not dismiss