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

Exploring the functionality of v-chips within a v-text-field

I am trying to implement a search text field using vuetify's v-text-field, and I want to display the user input in a chip (such as v-chip or v-combo-box). However, v-text-field does not seem to support chips based on the documentation. Is there a work ...

cssvue.jsvuetify.js

Is there a way for me to implement this code to achieve the functionality shown in the demo link

$('select').change(function() { var sum = 0; var sum = parseInt($('select[name="bathrooms"]').val() * 25) + parseInt($('select[name="bedrooms"]').val() * 8); $("#sum").html(sum); }); <script src="https://ajax.googleap ...

javascriptjqueryhtmlcssajax

Interactive Geography Selector

When updating your personal details on , you are required to choose your country first. Once the country is selected, the system automatically adjusts the city and/or state options based on that specific country's requirements. Can someone provide exa ...

javascriptjqueryhtmlajaxdhtml

Click to shift the div downwards

Currently, I have a piece of javascript applied to a div that directs the user to a specific link: <div style="cursor:pointer;" onclick="location.href='http://www.test.com';"> I am wondering if there is a way to add an effect where, upon ...

javascriptcss

Tips for positioning footer text to the left and right, similar to Google's style

Explore www.google.com for inspiration. You will notice a footer containing links to Advertising, Business, and About on the left side, and Privacy, Settings, Terms, etc. on the right side at the bottom of the page. I am an aspiring developer attempting ...

htmlcss

Converting HTML to plain text using the DOMDocument class

Is there a way to extract the text content from an HTML page source code, excluding the HTML tags? For example: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content="hu"/> <titl ...

phphtmldomdocument

Learn the process of automatically copying SMS message codes to input fields in Angular17

After receiving the first answer, I made some changes to the code. However, when testing it with Angular, I encountered several errors. How can I resolve these issues? TS: async otpRequest() { if ('OTPCredential' in window) { const ab ...

javascripthtmlangularangular-material

Background image not visible on Firefox and Chrome when using a DIV element

I'm encountering an odd issue where my DIV background isn't showing up in Firefox and Chrome, but it looks fine in IE. I've searched on several places like Stackoverflow for solutions to this problem, but none of them have worked for me so f ...

csshtmlbackground-image

Encountering a JavaScript error due to an erroneous character when trying to parse

I need to convert a `json` string into an object format that is extracted from a `.js` file. Here is the `JSON` string located in `document.js`: [ { "type": "TableShape", "id": "63c0f27a-716e-804c-6873-cd99b945b63f", "x": 80, ...

javascriptjqueryhtmljson

Optimizing SEO with asynchronous image loading

I've been developing a custom middleman gem that allows for asynchronous loading of images, similar to the effect seen on Medium. Everything is functioning smoothly, but I'm uncertain about the impact on SEO. The image tag in question looks like ...

javascripthtmlseo

The text within my div is spilling over the edges despite my attempts to use text align and overflow properties

body { font-family: Arial; font-size: 15px; } .container { position: relative; max-width: 1800px; height: auto; margin: 0 auto; text-align: center; width: 90%; } .container img { vertical-align: center; } .container .content { pos ...

htmlcss

Web Scraping - Is there anyone who can help tidy this up?

I've been grappling with this web scraping project for days now, and as a newbie in this field, I find myself stuck on a crucial issue that I can't seem to resolve. My Challenges The problem lies in the span loop location - currently it prints ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

What is the best way to ensure the default style is applied when validating?

input { background: white; color: white; } input:in-range { background: green; color: white; } input:out-of-range { background: red; color: white; } <h3> CSS range validation </h3> Enter your age <input type="number" min="1" max= ...

htmlcsscss-selectors

Using CSS to overlay multiple text boxes onto an image at different positions

Can you help me solve this challenge? I have an image of a real property that will be randomly loaded into a DIV with a width of 200 pixels. The image needs to be resized to 200 pixels wide while maintaining its proportional height. Additionally, I have fo ...

htmlcssimagecaptions

Build a home page in HTML with full width design

My webpage currently allows scrolling to the right and left in HTML. I would like to change this functionality. What I envision is having my cup and book visible without the need for scrolling, with a background image centered on the page. <div cla ...

htmlcss

Creating a horizontal alignment for social media icons

Need assistance with aligning my social icons horizontally. I initially tried floating them to the left or using inline-block, but it's not working as expected. Any help would be greatly appreciated. Thanks! <!-- Customizing Social Network Icons ...

htmlcss

Strange occurrences observed in the functionality of Angular Material Version 16

Encountered a strange bug recently. Whenever the page height exceeds the viewport due to mat-form-fields, I'm facing an issue where some elements, particularly those from Angular Material, fail to load. Here's a GIF demonstrating the problem: GI ...

htmlangulartypescriptangular-material

Script for calculating in PHP

I've scoured the internet in search of a sample script that meets my specific needs, but unfortunately, I have come up empty-handed. Essentially, I am looking to retrieve a value from a div and then multiply that number based on user input. For instan ...

phphtmlcalculator

Reorganize a list based on another list without generating a new list

Among the elements in my HTML list, there are items with text, input fields, and tables. I also have a specific order list like [3,1,2,0]. Is it feasible to rearrange the items in the HTML list on the page based on this order list without generating a new ...

javascripthtmljquerycss

Define the total in a CSS attribute

I am working with multiple divs that have a specific CSS class applied to them. My goal is to manually increase the pixel value in the top property: .class { top: 100px; } div class="class" style="top:+=50px" Is it possible to achieve this functiona ...

css