Geek Answers Handbook

Chrome breaks flexbox while Firefox doesn't

I have a problem with Chrome breaking on flexbox CSS on the first page of the website, but FF is not. Here is the HTML

    <div class="intro_container">
    <div id="top_text1" class = "intro_items intro_item_1">
    ....
    </div>
    <div id="top_text2" class = "intro_items intro_item_1">
    ....
    </div>
    </div>

and CSS

    div.intro_container  {
      width: 100%;
      background:;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
    }
    div.intro_items  {
      background: white;
      border:  .1em solid #000093;
      margin: 0.5em;
      padding: 3%;
      flex:  1 0 40%;
    }

Any help would be appreciated.

+4
source share
2 answers

From my point of view, the problem is not problems with browsers or flex.

The problem is the following CSS style,

             div#top_text1 {margin-top: -3%;}

line no: 325 in the layout.css file

So just remove this CSS style, add validation, this will work ....

+1
source

I get a similar problem ... I have a page that is OK in IE, Firefox, Opera and Safari ... but the width of the DIV is now “broken” in Chrome ... only last week or so.

Firebug ( ..) DIV , "".

, -, " " , . , , , , - : - (

0

More articles:


All Articles