I am facing an issue where the images (IMG) do not align properly when I test the responsiveness using Chrome

Seeking assistance with a design challenge I encountered. The first image showcases a well-structured table on desktop view, while the second image displays an undesired layout when examined using Chrome DevTools. A link to the problematic layout can be found here: https://jsfiddle.net/silosc/4zLwoehm/12/

The issue arose within a Bootstrap environment. Can anyone provide guidance on aligning the circles perfectly, akin to the initial image? I have attempted utilizing class="img-responsiveness" in the tables div, but that solution proved ineffective.

https://i.stack.imgur.com/Bn3f5.png

https://i.stack.imgur.com/L2QBQ.png

<div style="width: auto; text-align: center">
   <div class="row">
       <table style="width:100%; text-align: center;">
         <td style="width: 40%; border-top: 1px solid; border-top-color: gray ;background-color: floralwhite"><h3>Text here</h3></td>
          <td style="width: 10%; border-top: 1px solid; border-top-color: gray ; border-left-color: floralwhite; background-color: floralwhite; text-align:left">
          <i class="fas fa-circle" style="font-size:24px; color:red; margin-left:15px;"></i>
          </td>
            <td style="height: 100px; width: 30%; border-left: 1px solid; border-right: 1px solid; border-left-color: gray;border-right-color: gray;border-top: 1px solid; border-top-color: gray ;background-color: floralwhite">
               <div style="top: 0px">
                  <label>Accessorial Adjustment Refund</label>
               </div>
               <br />
                 <div style="left: 20%; position: relative">
                     <div class="col-lg-2">
                       <img src="~/Content/images/AuditingIcons/0gray.png" id="@iconId1" onclick="updateAudit(@d, 0, 1, 0)" />
                       <text>0%</text>
                     </div>
                     <div class="col-lg-2" style="margin-left: 10px">
                        <img src="~/Content/images/AuditingIcons/50gray.png" id="@iconId2" onclick="updateAudit(@d, 1, 2, 0)" />
                        <text style="text-align: center">50%</text>
                     </div>
                     <div class="col-lg-2" style="margin-left: 10px">
                       <img src="~/Content/images/AuditingIcons/100gray.png" id="@iconId3" onclick="updateAudit(@d, 2, 3, 0)" />
                       <text style="text-align: center">100%</text>
                     </div>
                 </div>
             </td>
             <td style=" border-top: 1px solid;  border-top-color: gray ;border-right-color: floralwhite; border-left-color: floralwhite; background-color: floralwhite">
                <div style="top: 0px">
                  <label>Invoice</label>
                </div>  
                  <text style="color: gray">
                     $123.00
                 </text>
             </td>
   </table>
  </div>  
</div>
htmlcssbootstrap-4

Answer №1

When working with code, make sure to use the correct BS4 classes. By comparing your code with mine, you can easily identify any issues.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div style="width: auto; text-align: center">
      <div class="row">
        <table style="width:100%; text-align: center;">
          <tr>
            <td style="width: 40%; border-top: 1px solid; border-top-color: gray ;background-color: floralwhite">
              <h3>Text here</h3>
            </td>
            <td style="width: 10%; border-top: 1px solid; border-top-color: gray ; border-left-color: floralwhite; background-color: floralwhite; text-align:left">
              <i class="fas fa-circle" style="font-size:24px; color:red; margin-left:15px;"></i>
            </td>
            <td style="height: 100px; width: 30%; border-left: 1px solid; border-right: 1px solid; border-left-color: gray;border-right-color: gray;border-top: 1px solid; border-top-color: gray ;background-color: floralwhite">
              <div style="top: 0px">
                <label>Accessorial Adjustment Refund</label>
              </div>
              <br/>
              <div class="form-row m-0">
                <div class="col-lg-2 ml-auto">
                  <img src="~/Content/images/AuditingIcons/0gray.png" id="@iconId1" onclick="updateAudit(@d, 0, 1, 0)" />
                  <text class="text-center d-lg-block">0%</text>
                </div>
                <div class="col-lg-2">
                  <img src="~/Content/images/AuditingIcons/50gray.png" id="@iconId2" onclick="updateAudit(@d, 1, 2, 0)" />
                  <text class="text-center d-lg-block">50%</text>
                </div>
                <div class="col-lg-2 mr-auto">
                  <img src="~/Content/images/AuditingIcons/100gray.png" id="@iconId3" onclick="updateAudit(@d, 2, 3, 0)" />
                  <text class="text-center d-lg-block">100%</text>
                </div>  
              </div>
            </td>
            <td style=" border-top: 1px solid;  border-top-color: gray ;border-right-color: floralwhite; border-left-color: floralwhite; background-color: floralwhite">
              <div style="top: 0px">
                <label>Invoice</label>
              </div>  
              <text style="color: gray">$123.00</text>
            </td>
          </tr>
        </table>
      </div>  
    </div>
  </body>
</html>

Give it a try and see if it meets your needs. If you have any questions or need further assistance, feel free to reach out.

Thank You...

Answer №2

**To solve the issue, simply assign a width or min-width that equals 100% of the container's width.**

The reason you are encountering this problem is due to the varying widths of 0%, 50%, and 100%.

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

Having trouble with the Semantic UI popup not showing div content correctly? Need to display table row data as well? Let's troub

Having trouble with this semantic-ui code popup error. Can anyone provide a solution? $(document).on('click', 'table td', function() { $(this) .popup({ popup: $('.custom.popup') }); }) ...

javascripthtmlpopupsemantic-ui

Extension for Chrome

My goal is to develop a Chrome extension that, when a specific button in the extension is clicked, will highlight the current tab. However, I'm encountering some challenges. Currently, I have document.getElementById("button").addEventListen ...

javascripthtmlgoogle-chrome-extension

Incorporate a CSS style element to a hyperlink button in JQuery Mobile

I am trying to apply a style to a link button element using JQuery. The code I have written is not working. Can anyone provide suggestions on how to achieve this? Below is the snippet of the HTML <div data-role="content"> <a href="#" class= ...

cssjquery-mobilebuttonhyperlink

My DIV is not floating to the right as expected. What could be the issue?

I'm having trouble positioning the timer to float on the right top side of the logo. Even though using the regular style="float:right" works perfectly... <div id="whole_page" /> <div id="header" /> <?php echo " ...

csshtml

When attempting to retrieve a value from a dropdown menu in HTML using PHP, an undefined index error occurs

Having trouble extracting a value from a select tag in HTML using PHP, as it keeps reporting an undefined index error. Here's my HTML form: <form method="POST" action="proceso.php"> <label for="language">Language</label> <se ...

phphtmlselect

Designing dynamic SVG elements that maintain uniform stroke widths and rounded edges

I'm currently tackling a project that involves creating SVG shapes with strokes that adjust responsively to the size of their parent container. My aim is for these shapes to consistently fill the width and height of the parent container, and I intend ...

javascripthtmlcsssvgfrontend

Display an image with HTML

My current project involves creating a chrome extension that will display a box over an image when hovered, while also zooming the image to 1.5 times its original size. In my research, I came across a similar example. .zoomin img { height: 200px; wi ...

javascriptjquerycsshtml

What is the best way to implement a day timer feature using JavaScript?

I am looking for a timer that can automatically change the rows in an HTML table every day. For example, if it is Day 11, 12, or 25 and the month is February at 8 AM, the rows should display "Hello!". function time() { var xdate = new Date(); var ...

javascripthtmldatedatetimetimer

Ensure the browser stays anchored at the bottom of the page while employing jQuery to reveal a div

This piece of code allows me to toggle the visibility of a div: <a href="#" class="show_hide">Show/hide</a> <div class="slidingDiv"> My content...... <a href="#" class="show_hide">hide</a></div> <script src="http:// ...

javascriptjqueryhtml

Aligning a set of list items horizontally within an unordered list is a great way to maintain a clean

I'm struggling with centering the alignment of li elements within a ul. Below is the excerpt from my code: ul.nav { width: 1000px; margin: 0 auto; list-style-type: none; } .nav li { float: left; width: 300px; } #government { clear: left ...

css

The audio must start playing prior to being forwarded to a new page

As I delve into the world of website development on my own, I have encountered an interesting challenge. At the top of my webpage, I have embedded an audio file within a button. If the user chooses to mute the audio, the navigation links will remain silent ...

javascriptcsshtmlaudio

Asynchronous JavaScript function within a loop fails to refresh the document object model (DOM) despite

I have been working on a function that utilizes ajax to retrieve instructions from a backend server while the page is loading. The ajax code I've written retrieves the instructions based on the number provided and displays them using the response.setT ...

javascriptjqueryhtmlajaxdom

Fine-tuning the design of the Box Model layout

I can't seem to get the table in my code to center properly and not be stuck against the left border. Despite trying various solutions, the table in column 2 is floating off to the left and touching the border. I need it to be more centered within the ...

htmlcsslayout

Triggering a JQuery event to switch between tabs

Currently, I am in the process of developing a web application that incorporates nav-tabs from Bootstrap. These nav-tabs consist of 4 different tab-contents. My main concern lies in determining which nav-tab the user has selected among the 4 tabs and updat ...

jqueryhtmltwitter-bootstrap

Bootstrap 5 - Create a full-screen modal perfectly aligned with its parent element

BootStrap 5 Incorporating the following layout: <div class="row flex-nowrap"> <div class="left"> <!-- leftbar --> </div> <div class="main overflow-auto position-relative"> <!-- ...

htmlcsstwitter-bootstrap

Adding Multiple CSS Classes to an HTML Element using jQuery's addClass Feature

Take a look at this HTML code snippet: <html> <head> <style type="text/css"> tr.Class1 { background-color: Blue; } .Class2 { background-color: Red; } </style> </head> <body> < ...

jqueryhtmlcss

Dividing HTML and JavaScript using Vue

Is there a way to separate HTML from data/methods in VueJS to avoid having one long file with both? I tried moving the contents of my <script> section into a new file called "methods.js" and importing it using: <script src="methods.js"> Note ...

javascripthtmlvue.js

Achieving the ideal HTML layout for small screens that differs from larger screens is a common challenge faced by web developers

After implementing the markup code, I achieved the desired layout on large screens. However, when reducing the screen size to a phone level, I require a layout similar to image-3, and on larger screens like laptops, it should resemble image-1. Image-1 and ...

htmlcssbootstrap-4

Persisting Big IndexedDB in the Browser

As we embark on the development of a Line of Business (LOB) HTML5 web application, our key objective is to ensure that the application has offline capabilities. Our plan involves retrieving a substantial amount of SQL data from the server and storing it in ...

sql-serverhtmlbrowserlocal-storageindexeddb

The amazing magnific popup boasts a pair of close buttons

I recently started working on integrating a front-end HTML theme with a back-end Laravel app. Oddly enough, I noticed that the popup modal is displaying two close x buttons instead of just one. Despite my efforts, I have been unable to pinpoint what exactl ...

javascripthtmlcssmagnific-popup