www.webdeveloper.com
Results 1 to 5 of 5

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

  1. #1
    Join Date
    Jan 2014
    Posts
    25

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

    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

  2. #2
    Join Date
    Jul 2013
    Location
    France
    Posts
    15
    hello,

    you css must be :

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

  3. #3
    Join Date
    Jan 2014
    Posts
    25
    Nice one, thanks deadmix.

  4. #4
    Join Date
    Jul 2013
    Location
    France
    Posts
    15
    You are welcome and glad that this work for you

  5. #5
    Join Date
    Feb 2014
    Location
    Managua, Nicaragua
    Posts
    45
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles