In Safari, there seems to be some additional space on the right side of the bootstrap

Encountered an issue with Safari version 5.1.7 involving a row containing 12 columns which results in extra spacing to the right within the container.

Below is the code snippet:

CSS

.wrapper {

    background:blue;
  }

  .wrapper .container {

    background:red;

  }

  .wrapper .container .row .col {

    height:30px;
    background:grey;
    padding: 0;
  }

HTML

<div class="wrapper">
  <div class="container">
    <div class="row">
      <div class='col-xs-1 col'></div>
      <div class='col-xs-1 col'></div>
      <div class='col-xs-1 col'></div>
      <div class='col-xs-1 col'></div>
      <div class='col-xs-1 col'></div>
      <div class='col-xs-1 col'></div>
      <div class='col-xs-1 col'></div>
      <div class='col-xs-1 col'></div>
      <div class='col-xs-1 col'></div>
      <div class='col-xs-1 col'></div>
      <div class='col-xs-1 col'></div>
      <div class='col-xs-1 col'></div>
    </div>
  </div>
</div>

The code functions properly on all browsers except for Safari.

View it in Chrome

View it in Safari

Answer №1

It's really no surprise given the outdated version you're using. Despite this, Bootstrap does address this issue in their documentation:

Safari percent rounding

In versions of Safari prior to v7.1 for OS X and Safari for iOS v8.0, there were issues with the decimal places in the .col-*-1 grid classes. This would cause 12 individual grid columns to appear shorter compared to other rows. Upgrading Safari/iOS is recommended, but if that's not possible, here are some workarounds:

  • Add .pull-right to your last grid column for hard-right alignment
  • Manually adjust percentages for perfect rounding on Safari (a bit more challenging)

Personally, I wouldn't spend time supporting a browser that's no longer widely used.

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

Why is the header image not appearing on mobile devices on the website?

I recently finished creating my own website with a header image that successfully expands to the width of the screen during testing on Google Chrome for mobile responsiveness. However, upon deploying and viewing the site on actual mobile devices, the heade ...

What is the way to modify the standard request for an "@" in the email address?

Although I've successfully changed the error message for when the user forgets to type in their email, I'm now wondering how to modify it when the user enters their email in the wrong format. Below is the code I've written in the style of B ...

Exploring and deciphering the intricacies of the underlying technology

Apologies if this question seems misplaced, but as a complete beginner, I'm a bit lost. Let's consider this website as an example: I'm trying to uncover the libraries and technologies employed in the background to learn more and replicate ...

Tips for boosting the tabindex in a React search result list with ul-li elements

Implementing search results using ul li: <ul className="search-result"> <li tabindex="1">title here...</li> <li tabindex="2">title here...</li> <li tabindex="3">title here... ...

Creating a responsive card design with Material UI

Creating a responsive card layout for mobile applications is my current challenge const styles = { edit: { width: "40%", marginLeft: 270, background: "#76ff03" }, add: { width: "100%", background: "#18ffff", size: "large" ...

Troubleshooting Div Element Width in CSS Not Functioning

When working on a form design, I encountered an issue where the text labels were not aligning to the same width. Despite setting the width, it didn't seem to work as expected: .form-label { display:inline; width: 160px; } <div class="form-label ...

What is the best way to limit the number of items displayed in a Bootstrap card?

While using bootstrap cards to display content, I encountered an issue when integrating it with the backend for looping. The items were continuously added to the right side instead of being set in columns of 3 and continuing straight down. It should look ...

${IDHERE} element's text color not changing when tab is switched

One dilemma I encountered involves displaying a percentage on a webpage with 2 tabs. The percentage is originally shown on the tab that is open when the page loads. The JavaScript code I used is quite straightforward: adaPercentColor(percent, ada) { ...

The hover state of a div will not be lost if its parent element is not being hovered over

When hovering over the second, third, or fourth item, hidden text will appear on the left side. If you hover your cursor over the hidden text, it will disappear again. I want to be able to hover over the second item, move my cursor to "hide", and click o ...

Align an element to the center and then align a second element to the right using Tailwind CSS

Here is a visual representation of my goal: the dashed line indicates the center of the container. My objective is to horizontally center one div element and then right-align a second div within the same row, all while keeping both elements centered. htt ...

Leveraging the -ms-filter feature in Internet Explorer 9 can enhance the browsing

Currently, I am using visual studio 2008 for developing a web application. The CSS version being used is 2.1 and the browser version is IE9. Due to the absence of the opacity property in CSS 2.1, I have resorted to utilizing -ms-filter to ensure my code fu ...

Modifying attributes for individual components in Vue.js classes

Recently, I integrated a reusable component called "LightBox" into my website, which displays images in higher resolution. The LightBox functionality is linked to each element having a thumbnail. However, I encountered an issue. There are multiple elements ...

use jquery to highlight a table row based on the current hour

Within my HTML structure, there is a table element with the class <table class="model">, and it contains several table data cells with the class class="model-date". The date format within these cells is as follows: DD-MM HH:MM For example, <td ...

Can a CSS hover effect transition modify the color scheme?

I have multiple buttons on a single page, and I want the hover effect to be applied to all of them with just one code using jQuery. Please review my code below. $(document).ready(function(){ $('.button').hover(function(){ var bc=$(this ...

Issue when attempting to update the background image using d3.js in browsers other than Firefox

I am experiencing a strange error that is puzzling to me. What I have done is placed a background image (SVG file) in a div using CSS. This SVG is used to create a Sprite animation, which is functioning correctly. .runner { background: url("0804_ ...

effortlessly eliminate the Google MyMap watermark from an iframe using ReactJS

I am new to ReactJS and I would like help on how to hide the watermark on a Google My Map. Can someone please assist me with this? <iframe src="https://www.google.com/maps/d/u/1/embed?mid=1OMSkPKZi-U-CnmBr71zByNxp8HYi-vOc&ehbc=2E312F" fram ...

When the page size decreases, implement a media query to rearrange div elements in a vertical order

I am currently facing a design challenge with a website component that appears as one solid inline block. While it looks okay on a normal-sized screen, things start to look strange when the screen size decreases. I have attempted using a media query to adj ...

Angular 10: A guide to dynamically highlighting navbar elements based on scrolling position

I am currently working on a single-page application using Angular 10. I have a simple page layout and I want to implement a feature that will highlight the navbar based on the scroll position. How can I achieve this functionality in a single-page applicati ...

Continual dark mode throughout page navigation with the ability to switch between light and dark modes

I've been experimenting with creating a persistent dark mode feature for web pages. My goal is to remember the user's preference as they navigate between pages. Additionally, I included a toggle button for switching between dark and light modes t ...

Setting push and pull columns in Bootstrap for smaller screen sizes can help to rearrange the layout and improve the

On my page layout with Bootstrap 3.2.0, I have set up the following structure: <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">1</div> <div class="col-lg-5 col-md-5 col-sm-6 col-sm-push-6 col-xs-12">2</div> <div class="col-lg ...