Wosley Alarico Wosley Alarico - 2 months ago 14
CSS Question

css display flex not working properly on chrome and safari

I used flexbox properties to make my section look like this:

enter image description here

It works fine on Chrome but I noticed a few differences when I checked firefox and safari.

This is how chrome looks like:
enter image description here

But on Firefox, I am not managing to apply to margin of 1% like I want as the red signal shows:

enter image description here

And on safari, the boxes are all one after the other:

enter image description here

It is a WordPress Site and not live yet. But here is my html structure:

<section id="services">

// here goes the title of the container

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

// here go all the box

<div class="services-container">

// this one of the boxes
</div>
</div>
</section>


And 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 make this work on all browsers?

Answer

I strongly suggest you not use flexbox, but floats instead. Delete all the flex properties your css should look like this:

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

Then you can add the rest of the styling. It will work on all browsers.

Comments