Display flex behaving unexpectedly in Chrome and Safari browsers

I utilized flexbox properties to achieve this layout for my section:

https://i.sstatic.net/UxQeW.jpg

While it functions smoothly in Chrome, I noticed some disparities when viewing in Firefox and Safari.

This is how it appears in Chrome: https://i.sstatic.net/ZPOFh.jpg

In Firefox, I'm encountering difficulty in applying a 1% margin as intended, as indicated by the red warning signal:

https://i.sstatic.net/5cCiW.jpg

And in Safari, the boxes are stacked one after another:

https://i.sstatic.net/SxKBH.jpg

The website is powered by WordPress but is not yet live. Here's the HTML structure:

    <section id="services">

        // Title of the container goes here

        <div class="main-container col-lg">  

               // All the box elements go here

         <div class="services-container">    

               // Individual box content              
         </div>
        </div>
    </section>

Here is the CSS:

#services {
    background-image: url("img/Services-background.jpg");
    background-color: red;
}
.col-lg {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: initial;
    max-width: 100%;
}
.services-container {
    color: #d6d6d6;
    margin: 1%;
    max-width: 100%;
    width: 30%;
}

How can I ensure this layout works consistently across all browsers?

Answer №1

To achieve consistent performance of flex properties across all browsers, it is recommended to utilize prefixes.

For a comprehensive overview of browser compatibility and available prefixes for flex box, you can refer to this chart from MDN.

Answer №2

 justify-content: center;
-webkit-align-items: center;
-moz-flex-direction: column;
-ms--flex-wrap: wrap;

Answer №3

For optimal compatibility, I recommend avoiding the use of flexbox and instead utilizing floats in your CSS code. Remove all flex properties from your stylesheet to achieve the following:

#services{
    background-image: url(img/Services-background.jpg);
    overflow: auto;
}
.services-container {
    color: #d6d6d6;
    width: 30%;
    float: left;
    margin: 1%;
}

Once you have made these adjustments, feel free to apply additional styling as needed. This approach will ensure consistent functionality across all web browsers.

Answer №4

In my experience, the HTML version can sometimes be the culprit:

Upon checking the <!DOCTYPE html> at the beginning of the source code, I realized that my HTML was at version 4.0.something, which was likely why flex wasn't functioning properly. Once I updated the version, everything worked as expected.

Wishing you the best of luck...

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 implementing ng-hide and ng-show functionality

I have been working on creating my very first Angular website and so far, everything has been going smoothly with the first page. However, I am facing an issue with the second page not appearing as expected when it meets the condition set with ng-show in t ...

"Creating Eye-Catching CSS Animation Effects with Dynamic Initial States

I am looking to understand how I can seamlessly transition from a hover-triggered animation to an exit-hover animation, regardless of where the hover animation is in progress. Currently, if I exit hover too quickly, the animation jumps back to its starting ...

Problems encountered with operating the Bootstrap burger menu

After following the Bootstrap navbar documentation and implementing the code in my bs-navbar.component.html file, I encountered an issue with the hamburger menu. Despite everything being set up correctly, clicking on the hamburger icon did not display the ...

Cascading Style Sheets variable and Sassy CSS mixin

I'm facing a challenge involving the use of CSS variables in conjunction with my VueJs app. The goal is to make a hover effect (changing background-color) customizable by the application, while having a default value set in a nested SCSS map using the ...

During testing, the Vuetify expansion panel body is hidden with a display none style

Greetings! I am currently facing an issue while debugging my testing site. The problem is that the expansion panels are not displaying due to a style attribute attached to the div element of v-expansion-panel__body. Strangely, this issue does not occur on ...

Creating interactive HTML buttons using JavaScript to trigger AJAX requests

My current task involves populating an HTML table to showcase users. By making API calls to retrieve user data, I utilize Javascript to add rows to the table. Each row ends with a delete button, intended to trigger a $put request to a separate API endpoint ...

Capture any clicks that fall outside of the specified set

I am facing an issue with my navigation drop down menu. Currently, the pure CSS functionality requires users to click the link again to close the sub-menu. What I want is for the sub-menu to close whenever a click occurs outside of it. I attempted a solu ...

Unable to retrieve file on Linux system through PHP

<?php // Ensuring that an ID is provided include('include/function.php'); if(isset($_GET['id'])) { // Retrieving the ID $id = intval($_GET['id']); // Validating the ID if($id <= 0) { die('Th ...

Can the font size of a container be adjusted proportionally to its width or height using only CSS?

When it comes to ensuring that the font always fits nicely within its container, I rely on using Javascript to set divs or specific class to have their font-size dynamically equal to their width, and adjust their inner text elements accordingly. If you wa ...

Practical applications of flexible layouts in everyday life

I'm currently on the hunt for real-world examples of elastic layouts, specifically those based on using em's for widths. Surprisingly, I haven't been able to find much out there. If anyone knows of any examples, I would greatly appreciate it ...

Styling Tip: Aligning text to the baseline of a height-adjusted input field using CSS

As per the information from the Mozilla documentation, it states that I can align the text in an input field to the baseline if the element's display property is set to inline-block. I have made adjustments to the height of several input elements, bu ...

Tailored alignment of checkboxes and labels

I've designed a custom checkbox where the actual checkbox is hidden and a label is styled to look like a checkbox. Everything works fine, however, when I add a label, it doesn't align properly. Here's the link to the fiddle: http://jsfiddle ...

How to determine if an Angular list has finished rendering

I am facing an issue where I have a large array that is being loaded into a ul list using ng-repeat in Angular. The loading of the list takes too long and I want to display a loader while it's loading, but hide it only when the ul list is fully render ...

Padding on a flex item nudges a neighboring flex item out of place

Encountering an issue - within a div container, I have 4 nested divs using the grid system. Oddly enough, the third div in the grid is not behaving as expected. When setting a margin-bottom for this div, instead of creating space at the bottom, it pushes ...

Lines are showing up on the screen, but their origin within the html or css remains a

While creating my website, I encountered a minor issue. Some elements like div or text element are showing lines when hovered over with the mouse, but they disappear once clicked elsewhere. Surprisingly, there is no border defined for them. I am stuck at ...

Concealing/Revealing Elements with jquery

For hours, I've been attempting to switch between hiding one element and showing another in my script. Here is the code I am using: <script type="text/javascript"> function () { $('#Instructions').hide(); $('#G ...

What are some ways I can decrease the background width and shrink the div width?

I am hoping to maintain the current box size and borders, but I want to add a touch of color. Specifically, I would like to have a red line running through the center of the box without coloring the entire background. Although I know one way to achieve thi ...

Adjust the size of the flex item based on the background image dimensions

Within a flexbox, there are flex items displayed Each flex item should appear as a clickable folder with specific text inside It seems that the only CSS way to achieve this is by using a background image. However, I want to accomplish the following: Cons ...

Caution: It is important for each child within a list to have a distinct "key" prop when using react-input

I'm currently facing an issue with the following code snippet: {array.map((item) => ( <> <input key={item.id} type="checkbox" /> ...

Create a dropdown menu option that changes based on the number of items that have been

I need a selection option that displays values 1 to 5. Depending on the selected value, it should generate select options equal to the number selected. For example, if I choose 3, then it should generate 3 select options. Is it possible to loop the ajax in ...