The functionality of Bootstrap 4 rows and columns seems to be malfunctioning in Safari, and I am unable to get the fixes for row::before and ::after to work properly

Having trouble with cross-browser testing on Safari due to additional properties added in Bootstrap 4 for rows causing the grid format to appear distorted. I want the layout to look exactly the same as it does in Chrome or Firefox. Despite trying various fixes for this issue, none of them seem to work for me.

.row::after, .row::before 

    display: inline-block!important;
    width:0px;
    height:0px;

The following Bootstrap 4 properties are not supported in Safari:

.row 

    display: -ms-flexbox; //not supported in Safari
    display: flex;        //not supported in Safari
    -ms-flex-wrap: wrap;  //not supported in Safari
    flex-wrap: wrap;      //not supported in Safari
    margin-right: -15px;
    margin-left: -15px;

.col-6 

   -ms-flex: 0 0 50%;     //not supported in Safari
   flex: 0 0 50%;         //not supported in Safari
   max-width: 50%;        //not supported in Safari
cssbootstrap-4safaricross-browser

Answer №1

To hide the content before and after the row, you can add the following CSS:

.row::before, .row::after { display: none !important; }

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

org.hibernate.id.IdentifierGenerationException: Please assign IDs manually before attempting to save objects of class com.robicciportal.entity.Dnd

I encountered the mentioned error in my Spring Boot application. I prefer not to have auto-generated primary key values due to the fact that my primary key is a string type representing mobile numbers of customers. Below is the controller code: package com ...

spring-boothibernatebootstrap-4thymeleafsts

Achieving vertical centering for content within :before/:after pseudo-elements

I'm striving to replicate a similar layout as shown in the image: Within a div element containing an image as part of a slideshow, I have utilized :before and :after pseudo-elements to create controls for navigating to the next (>>) or previous ...

csscss-selectorspseudo-element

Changing the parent div element based on the child div element

Is there a way to dynamically apply style properties, such as 'float', to the parent div based on its child div element, preferably using JavaScript without the need for additional div elements? <div class="chat-message"> <span clas ...

javascriptjqueryhtmlcss

What steps can I take to minimize the excessive white space below the footer on my website?

I have been attempting to resolve this issue by using multiple methods, but none of them have successfully fixed it. overflow-x: hidden; min-height: 100%; margin: 0px; https://i.sstatic.net/2ctwo.jpg Code: body: background-color: White; margin: 0px; p ...

javascripthtmlcss

What is the best way to utilize JavaScript in order to eliminate a tag when an option is chosen within an HTML form?

I'm in the process of designing a website for an artist. The website includes a contact form, and I'm currently working on a JavaScript script to remove the hidden class that I applied to the commission rules section. The goal is to make this sec ...

javascripthtmlcssreactjs

"Local dropdown feature functioning correctly, but encountering issues when deployed to the

While developing my website with Symfony 4, I decided to use a bootstrap theme from Everything was working fine when testing it locally. However, once I deployed the site on my OVH server, the dropdown menu stopped functioning. Local Setup: https://i.ss ...

jquerysymfonybootstrap-4symfony4

Updating CSS stylesheets dynamically when onchange event occurs

I am currently able to dynamically change style rules using JS, but I feel that this is limiting. I would prefer to be able to swap entire CSS stylesheet files easily. Do you have any suggestions on how to accomplish this? Here is my code: <label>T ...

javascriptjqueryhtmlcss

Obtaining solely the words found within HTML documents

In my Python 2.7 project, I have a folder containing multiple HTML pages that I need to extract only words from. My current process involves opening the HTML file, using the Beautiful Soup library to extract text, and then writing it to a new file. However ...

javascriptpythonhtmlcsspython-2.7

The static background and fixed header are locked in a perpetual battle

I am currently working on creating a fixed header that remains at the top of the page. However, I am facing an issue where the background seems to be overlapping and hiding the header. <style type="text/css> html, body {height:100%; margin:0; paddin ...

htmlcss

pictures on the blog entries

I'm looking to customize the look of images within a section. I want to add borders to the images, but since they are being added dynamically as content in blog posts, I can't reference them directly. Can you recommend a way for me to achieve thi ...

htmlcss

Aligning elements in the middle of a div, from side to side

If you imagine a container div that is 100px wide, and inside it there are 3 smaller divs each 20px wide. I am wondering how to align these smaller divs so that they are centered within the container div, with a 20px gap on each side? ...

htmlcssalignment

Unable to specifically identify or focus on this offspring

I am attempting to target the class has-translucent-status-bar nested within another class called platform-ios To achieve this, I have used the following code: .platform-ios > .has-translucent-status-bar Unfortunately, this approach has not been succ ...

htmlcss

The enchanting world of CSS background scrolling animations

I am currently developing a website where I have split the hero/header into two sections - one on the left with information and the other on the right with a graphic. I wanted to add a simple parallax effect to the image on the right side, so I used backgr ...

jqueryhtmlcss

Exploring the differences between a fixed-top navbar and dark theme in Bootstrap 5.3

I've been struggling to find a solution for having a fixed top navigation bar that remains solid without being transparent in both dark and light themes. Switching between dark and light themes results in the fixed-top navigation bar appearing transp ...

javascriptcssbootstrap-5

Ways to modify the color of mat-icon within an input field using Angular 6

Here is the code from my HTML file: <div class="input-field"> <div> <input type="text" id="name" required email/> <label for="name">Email: <mat-icon svgIcon="mail" class="change-color"></mat-icon> &l ...

cssangularinputicons

convert a list of options into a dropdown selection menu

Is there a way to turn a regular menu into a dropdown menu for small devices without modifying the HTML code? I have a responsive design, but I'm not sure how to add that 'hamburger menu' style. Note: I am unable to make changes to the HTML ...

javascriptjqueryhtmlcss

Is there a way to conceal the parent element when the child element is hidden from view?

Wanting to remove the stars badge in the review section of a Shopify store when there are 0 reviews for the product. The goal is to have the badge appear automatically once a review is received. Here's the code snippet: HTML <div class="spr- ...

htmljquerycssshopifyliquid

Shifting Icon to the Right within the Drawer Navigator Toolbar

While modifying the example code for Material UI's drawer navigator, I decided to enhance it by adding a notification icon and a checkout icon with the Admin Panel typography in the toolbar. However, I encountered an issue where the checkout icon app ...

javascripthtmlcssreactjsmaterial-ui

What is the best way to incorporate an HTML element using JavaScript?

My attempt to generate a chip when a checkbox is checked by adding an event listener function to the checkbox seems to be failing. It appears that the element is not being inserted into the HTML. Below is the code snippet: let ChoosenFiltercontainer = docu ...

javascripthtmlbootstrap-4innerhtml

Difficulty in centering two equal-sized columns in a Bootstrap 3 row with an offset

Here is a link to my demonstration on JSFiddle: https://jsfiddle.net/nbd2w3zb/ I am working with Bootstrap 3 and have created 2 equal-sized columns (.col-md-4) within a .row. The desired effect is to center both of these columns inside the .row, ensuring ...

htmlcsstwitter-bootstrap