CSS Layout- Flexbox overlapping issue

Hello,

I have a problem with flexbox overlapping issue on android (both chrome[latest v.] and android browser[4.3]). In desktop or on chrome developer tools set to phone view- it's rendered as it should- look at this screenshot http://prntscr.com/7x6r26 (don't mind the styling it's not done yet).

Issue on the android is that the icons are overlaping with the text (it's the area bellow the chevron)

HTML
<section id="proc-my">
      <div class="container">
        <div class="proc1">
          <div class="icons"><span class="fa fa-bar-chart"></span></div>
          <div class="proc-text">
            <h3>Váš web bude přinášet výsledky</h3>
            <p>Nejdůležitějším pilířem každého webu je jeho výkonnost, protože web, který Vám nepřináší peníze pro Vás většinou nemá smysl. Klademe tedy na výkonnost velký důraz.</p>
          </div>
        </div>
      </div>

</div>

Open in new window


SCSS
#proc-my {
	.proc1, .proc2, .proc3 {
		display: flex;
		flex-direction: row;

	}
	$green: #3daa81;
	.icons {
		.fa {
			color: darken($green, 5%);
			font-size: 1.8em;
		}
	}
	.proc-text {
		padding-left: 0.7em;
	}
}

Open in new window

LVL 1
Fajer39Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Brandon LyonSenior Frontend DeveloperCommented:
Flexbox is only partially supported in the default Android 4.3 browser and requires a prefix. See caniuse.com for more info. It should work in Chrome, but I can't see enough of the CSS and HTML to know what might be causing the bug.
Brandon LyonSenior Frontend DeveloperCommented:
Here is a sample codepen. Does this work on the devices you're looking at? http://codepen.io/anon/pen/KprWjz

<section id="proc-my">
      <div class="container">
        <div class="proc1">
          <div class="icons"><span class="fa fa-bar-chart"></span></div>
          <div class="proc-text">
            <h3>Váš web bude přinášet výsledky</h3>
            <p>Nejdůležitějším pilířem každého webu je jeho výkonnost, protože web, který Vám nepřináší peníze pro Vás většinou nemá smysl. Klademe tedy na výkonnost velký důraz.</p>
          </div>
        </div>
      </div>

</div>

Open in new window


#proc-my {
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	-ms-flex:auto;
	-webkit-flex:auto;
	flex:auto;
	-ms-flex-wrap:wrap;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	width:300px
}

.proc1,.proc2,.proc3 {
	-ms-flex:1 0;
	-webkit-flex:1 0;
	flex:1 0;
	position:relative
}

.icons span:after {
	content:" ";
	display:flex;
	background:green;
	font-size:1.8em;
	width:1rem;
	height:1rem;
	position:absolute;
	top:0;
	left:0
}

.proc-text {
	padding-left:2rem
}

Open in new window

Fajer39Author Commented:
Hello Brandon,

You're right, you need a better explanation.

1.So this is the live version of the web [ please set Iphone 4 in chrome dev] goo.gl/YCMS3q
2. I made some simplifications, so css and html now looks like this:

SCSS
#why-us {
	padding: 10px 10px;
	.why1, .why2, .why3 {
		display: flex;
		flex-direction: row;
		flex: 1 0;
		padding: 16px 0;
	}
	$green: #3daa81;
	.icons {
		display: flex;
		color: darken($green, 5%);
		font-size: 1.8em;
	}

	.why-text {
		display: flex;
		flex-direction: column;
		padding-left: 0.7em;
		h3{
			color: #4e4d4d;
			margin-bottom: 0.3em;
		}
		p {
			color: #555454;
		}
	}
}

Open in new window

NOTE: I use gulp which automatically handles prefixing, so it has all the prefixing in the css. You can see that in the live version of the web.

HTML:
<section id="why-us">
      <div class="container">
      
        <div class="why1">
          <div class="icons"><span class="fa fa-bar-chart"></span></div>
          <div class="why-text">
            <h3>Váš web bude přinášet výsledky</h3>
            <p>Nejdůležitějším pilířem každého webu je jeho výkonnost, protože web, který Vám nepřináší peníze pro Vás většinou nemá smysl. Klademe tedy na výkonnost velký důraz.</p>
          </div>
        </div>
      
        <div class="why2">
          <div class="icons"><span class="fa fa-check-square-o"></span></div>
          <div class="why-text">
            <h3>Respektujeme Vaši vizi</h3>
            <p>V souhladu s Vaší vizí a strategií Vám navrhneme nejlepší řešení podložené jasnými argumenty. Chceme aby Váš projekt uspěl, takže s Vámi jen slepě nesouhlasíme, ale jsme k Vám upřímní.</p>
          </div>
        </div>
      
        <div class="why3">
          <div class="icons"><span class="fa fa-trophy"></span></div>
          <div class="why-text">
            <h3>Milujeme výzvy</h3>
            <p>Že něco nejde? Nesmysl! Nebráníme se netradičnímu řešení, pokud povede k požadovaným výsledkům.</p>
          </div>
        </div>

      </div>
    </section>

Open in new window


3. THis is how it looks like on my Galaxy S4 now http://prntscr.com/7yrazw

4. Disclaimer: This is my first FLEXBOX site but I don't know, it seems to me that it should run OK with this code everywhere.
The idea is to have it ready for easy scalling to bigger screens.

NOTE: I tested your code but it was not working.
Brandon LyonSenior Frontend DeveloperCommented:
The codepen I provided looks right in Android's stock 4.3 browser. I was confused by grunt since I wasn't familiar with it. Now I'm looking at the raw HTML and CSS from the link provided and the picture is different from what I had guessed.

I've created a new codepen which should be more applicable, http://codepen.io/anon/pen/MwZeMR.

Looking into it, the issue lies with the syntax. The flexbox specification has changed over time. Older browsers, such as the one in Android 4.3. require the "2009 syntax". This means that the outer wrapper needs to have slightly different syntax,

.container {
  	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

Open in new window


Note that it's just display: box, and not display: flexbox in the older spec. Those will carry forward in the new versions of the same browsers. IE never had a plain box implementation, but they still require the browser prefix.

You may have to tinker with syntax a bit more to get things to your liking. Here is a great article on the older syntaxes.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Fajer39Author Commented:
Thank You Brandon, you were right - the problem was with the old syntax.

So I looked at my gulp conf file and set autoprefixer to its default values -> [' > 1%, last 2 versions, Firefox ESR, Opera 12.1 '] , because I had only 'last 1 version' before and I wasn't aware of it. I was so sure that it's all set so I was looking everywhere else to solve this issue.

* I'm learning with gulp too - with every error I'm getting smarter :-D

Have a nice weekend.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.