What are some solutions for troubleshooting a responsive image that functions correctly in Firefox but not in Chrome and Safari?

My row contains several img elements with height-capped sizes, displaying properly on Firefox but stretching on Chrome and Safari.

Firefox

Chrome

Safari

HTML:

<div class="container-fluid text-center" style="padding-top: 15px">
  <h6 class="card-subtitle mb-2 text-muted">Tools & Software</h6>
  <div class="row justify-content-center">
    <img src="img/icons/adobe.png" class="skill-icon" alt="Adobe Creative Suite" data-toggle="tooltip" data-placement="top" title="Adobe Creative Suite">
    <img src="img/icons/gravit.png" class="skill-icon" alt="Gravit Designer" data-toggle="tooltip" data-placement="top" title="Gravit Designer">
    <img src="img/icons/macos.png" class="skill-icon" alt="macOS" data-toggle="tooltip" data-placement="top" title="macOS">
    <img src="img/icons/windows.png" class="skill-icon" alt="Windows" data-toggle="tooltip" data-placement="top" title="Windows">                
    <img src="img/icons/adobe.png" class="skill-icon" alt="Adobe Creative Suite" data-toggle="tooltip" data-placement="top" title="Adobe Creative Suite">
    <img src="img/icons/gravit.png" class="skill-icon" alt="Gravit Designer" data-toggle="tooltip" data-placement="top" title="Gravit Designer">
    <img src="img/icons/macos.png" class="skill-icon" alt="macOS" data-toggle="tooltip" data-placement="top" title="macOS">
    <img src="img/icons/windows.png" class="skill-icon" alt="Windows" data-toggle="tooltip" data-placement="top" title="Windows">                
    <img src="img/icons/adobe.png" class="skill-icon" alt="Adobe Creative Suite" data-toggle="tooltip" data-placement="top" title="Adobe Creative Suite">
    <img src="img/icons/gravit.png" class="skill-icon" alt="Gravit Designer" data-toggle="tooltip" data-placement="top" title="Gravit Designer">
    <img src="img/icons/macos.png" class="skill-icon" alt="macOS" data-toggle="tooltip" data-placement="top" title="macOS">
    <img src="img/icons/windows.png" class="skill-icon" alt="Windows" data-toggle="tooltip" data-placement="top" title="Windows">                
    <img src="img/icons/adobe.png" class="skill-icon" alt="Adobe Creative Suite" data-toggle="tooltip" data-placement="top" title="Adobe Creative Suite">
    <img src="img/icons/gravit.png" class="skill-icon" alt="Gravit Designer" data-toggle="tooltip" data-placement="top" title="Gravit Designer">
    <img src="img/icons/macos.png" class="skill-icon" alt="macOS" data-toggle="tooltip" data-placement="top" title="macOS">
    <img src="img/icons/windows.png" class="skill-icon" alt="Windows" data-toggle="tooltip" data-placement="top" title="Windows">              
  </div>
</div>

CSS:

.skill-icon {
    width: auto;
    height: 50px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
}

How can I achieve the same dimensions and responsiveness in Chrome and Safari as I have in Firefox? Thank you in advance!

htmlcssresponsive-designbootstrap-4

Answer №1

The issue arises when the following CSS code is applied:

* {
    box-sizing: border-box;
}

It is unclear which browser displays the images correctly, but you can fix this by either reverting to default settings:

.skill-icon {
    box-sizing: content-box;
}

or by removing any paddings.

Check out the JSFiddle link for the first solution.

Find more information on box-sizing.

Answer №2

It appears that the parent row's flexbox is causing issues with your styling. Try adjusting the row's style to something more suitable for your needs, such as changing it to display: block; or display: inline;

This adjustment should resolve the problem.

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

The asynchronous ajax request is leading to a browser freeze

In the HTML page, I have two sets of a and p elements that are initially set to display:none. At the bottom of the page, there is a function being called with their respective ID's and values, which will enable one of them based on certain conditions ...

javascriptjqueryhtmlajax

Emphasize x-axis heading in a Highcharts graph

In my Highcharts bar graph, I am looking for a way to dynamically highlight the x-axis label of a specific bar based on an external event trigger. This event is not a standard click interaction within the Highcharts graph. Currently, I have been able to r ...

csstypescripthighchartstypescript2.0

Responsive column display on mobile devices can be optimized by configuring columns to appear in a 2x3 or 1x6 layout. This can be achieved even with

Currently utilizing the Avada Fusion Theme, my ability to edit core theme HTML files is limited. Fortunately, I do have access to Custom CSS. The challenge I am facing involves adjusting the display of the columns to appear as 2x3 instead of 1x6 on mobil ...

htmlcsswoocommerceresponsive

Ensuring the correct width for a .png image in an email newsletter for Outlook 2013

After creating an email newsletter that works perfectly on all email clients except Outlook 2013, I realized that the image I included is not adhering to the table width specified. Instead, it is defaulting to its own width of 658px. View image here Below ...

htmlcssemailoutlooknewsletter

Expanding the size of a buffer array dynamically in JavaScript while adding items

Within the source table are several records stored. Upon clicking each record in the source table, the AddSelectedItem(sValue) function is triggered, adding those specific records to the destination table. The desired outcome is for the array to dynamica ...

javascripthtml

How can I toggle the radio button based on the dropdown selection?

I'm attempting to enable or disable a radio button based on the selection from a dropdown menu. View my jsfiddle example here For example, if the user selects "persons" from the dropdown, only the options for Anthony and Paul should be available to ...

javascripthtmljquery

Mixing percentage width with a fixed minimum width in CSS results in divs failing to align in a single line

Having an issue with the responsiveness of a website layout that includes three columns (let's say 'A', 'B', and 'C') each 96% high, along with a footer. Columns A and C have a width of 35%, while column B is set to be 30 ...

htmlcssresponsive

The CE button on the calculator seems to be malfunctioning

My calculator's CE button isn't working as expected – instead of deleting the last entered number, it clears all numbers. I want the CE button to only delete the last number entered. Additionally, I want the calculator to display a default valu ...

javascripthtmlcss

Two-column layout with consistent height vertically, but varying heights on individual rows

By using JavaScript, I am able to ensure that two columns have equal height. The left column contains user input which can vary in length, causing some columns to have more content than others. My current issue is that there are multiple rows instead of ju ...

javascriptjquerycss

The callback for AJAX was unsuccessful

Using ajax to update form data in the database, a success response is expected but it's not functioning as intended. html <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> ...

javascriptphpjqueryajaxhtml

php query that does not include the var= parameter

I want the visitors of my website to be able to access user statistics on a different site by simply entering example.com/user/user_name without needing to add a parameter like example.com/user/username=user_name. Since I don't know all potential user ...

phphtmlhttp-status-code-404

What is the best way to open a new window, such as a music player, and integrate it into a Shopify environment

Currently, within my Shopify store, I am using the following code: <script language="javascript" type="text/javascript"> function popupwindow(url, winName, w, h) { var left = (screen.width/2)-(w/2); var top = (screen.height/2)-(h/2); return wi ...

javascripthtmlshopify

What is the best method for transferring HTML tables to Excel with multiple tabs?

I have created a code that exports an HTML table into an Excel file. However, I now need to export multiple HTML tables into different tabs within a single Excel file. Here is the current code: Currently, when I click "Export To Excel," the Excel file is d ...

javascriptphpjqueryhtmlajax

Transitioning CSS on the removal of a class

I'm attempting to implement a sliding effect on a div using CSS transitions, but it seems that the transition only works when closing the div. HTML: <div class="slider closed" id="more-details"> Some content </div> CSS: .slider ...

jquerycsscss-transitions

Identifying the issue of body.onload not being triggered

My web pages use body.onload (or window.onload) to properly set up, but sometimes the onload event is not being triggered. Is there a way in a specific web browser (preferably Chrome, where this issue seems more common) to identify what is causing the pag ...

javascripthtmldom

Tips for utilizing the font-family style to span multiple columns

I recently discovered that you can set the background color across table columns using the <colgroup> tag. table { border: 2px solid; border-collapse: collapse; } td { border: 2px solid; } <ta ...

htmlcsshtml-table

The runtime is experiencing difficulty in loading the Bootstrap files

File Structure in eclipse The issue is that the CSS files are not loading at runtime, causing me to lose the design I created. Below is my code for the login page. When clicking on the links for the CSS files, they open in the Eclipse IDE instead of load ...

csstwitter-bootstrapspring-mvc

The HTML.LabelFor function is failing to display correctly

I am facing an issue with Html.LabelFor where it doesn't render properly. Instead of displaying the value of ProviderName like "AT&T," it just shows the text ProviderName instead of the actual value. <div id="ServiceProvider" class="main_filter" n ...

htmlasp.net-mvc-4labelhtml.labelfor

Swapping React components within a list: How to easily change classes

For my latest project, I am building a straightforward ecommerce website. One of the key features on the product page is the ability for users to select different attributes such as sizes and colors. These options are represented by clickable divs that pul ...

javascriptcssreactjs

Tips for sending information to a modal dialog box

My menu is dynamically generated with menu items using a foreach loop. Each item includes an event name and an edit button tailored to that specific event. Check out the code snippet responsible for creating this menu: foreach ($result as $row) { $eventid ...

javascriptphpjqueryhtmlbootstrap-4