How do I stop text overlapping when screen size is reduced?

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

How do I stop text overlapping when screen size is reduced?

dupy

Hello

How can I stop the following happening please...

http://imageshack.com/a/img585/9356/5dgk.jpg

Here is my code...

http://codepen.io/anon/pen/xoAgG

Thank you

deadmix

hello,

you css must be :

.features-2 span { 
	width:7%; 
	text-align:left; 
	display:block; 
	float:left;
}
.standard-line-height {
	line-height:1em;
}

Goodluck

dupy

Nice one, thanks deadmix.

deadmix

You are welcome and glad that this work for you

JCPerez

when u work with porcents on CSS, i would like to recomend use 'min-' and 'max-' properties, to set the min and max size of ur element...

to solve that problem, u can add 'min-width: 50px;' to the class '.features-2 span'

.features-2 span {
font-weight:700;
width:16%;
min-width:70px; / add this property to control the min size/
text-align:left;
display:block;
float:left;
}

hope to be helpful