Jump to content

Responsive framework problem with small columns.


daytona10
 Share

Recommended Posts

Hello everyone, I am making a responsive framework for myself to quickly use in my projects. I got the columns the correct size and all but I have a problem that text will go outside of the column if it's too long. Here is my Css code.

body{background:green;}.row{display:block; width:100%; overflow: auto; margin: 0px 0;}.container{width:1170px;background:white;margin: 0px auto;}.column1,.column2,.column3,.column4,.column5,.column6,.column7,.column8,.column9,.column10,.column11,.column12{margin:10px 1.041667%; float:left; background: #f0f0f0; box-shadow: 0px 0px 1px 1px #e1e1e1; border-radius: 2px; }.column1{width:6.25%; display:block;}.column2{width:14.583333%; display:block; }.column3{width: 22.91667%; display: block;}.column4{width: 31.25%; display: block;}.column5{width: 39.583333%; display: block;}.column6{width: 47.916667%; display: block;}.column7{width: 56.25%; display: block;}.column8{width: 64.583333%; display: block;}.column9{width: 72.916667%; display: block;}.column10{width: 81.25%; display: block;}.column11{width: 89.583333%; display: block;}.column12{width: 97.916667%; display: block;}.text-center{text-align:center;}.text-left{text-align:left;}.text-right{text-align:right;}

and here is an image explaining the problem. 2rhqzye.png As you see, the word columns partially comes out of the actual column itself. On the right is more of the code. Any suggestions?

Edited by daytona10
Link to comment
Share on other sites

Well, think about that. How do you suppose the text 'Column' to behave? Of course it's going to blow out of the containing div. You have a couple of choices. 1. The font size should be changed to fit the size of the box2. Use CSS property word-break to force the word to break. Keep in mind that word-break is not support the same in different browsers.

Link to comment
Share on other sites

Well, think about that. How do you suppose the text 'Column' to behave? Of course it's going to blow out of the containing div. You have a couple of choices. 1. The font size should be changed to fit the size of the box2. Use CSS property word-break to force the word to break. Keep in mind that word-break is not support the same in different browsers.
Mentioning the word-break made me remember word wrap. I used
word-wrap: break-word;

and it all works now. Thank you!

Edited by daytona10
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...