Bootstrap responsive on mobile devices - css

Question

How can I set automatic line breaks on mobile devices? At the moment my code looks like:
HTML
<div class="container-fluid bg-1 text-center">
<h2>MessageOfTheDay</br>
</br></h2>
<p style="margin-bottom: 100px;">SOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</p>
<h1 style="margin-bottom: 100px;">XXXXXX</br>
SOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</br>
SOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</h1>
</div>
CSS
.bg-1{
background-color: black;
background-size: cover;
color: #ffffff;
height: auto;
min-height:620px;
padding:10px;
margin-top:0px;}
body {
font: 20px "Montserrat", sans-serif;
color: #f5f6f7;}
p {font-size: 20px;}
.margin {margin-bottom: 10px;}
h1,h2,h3{
margin-top: 0px;
margin-bottom: 0px;}
.container-fluid{
padding-top: 20px;
padding-bottom: 0px;}
h1{font-size: 50px;}
How can I fix truncate text? I want set automatic brake line on mobile.
Image

Answer 1

It would be a bit of a Janky fix, but this should work... Bootstrap allows us to display/hide information based screen size with built in media query's... so if you wanted to add a break at a specific point in the text, you could do something like the following:
<div class="visible-xs"><br /><br /></div>
or maybe this would even work, Not sure on the following so give it a shot and let us know if it worked for you:
<br class="visible-xs" />
the "visible-xs" class in bootstrap should make the content visible only if the screen size is less than 768px... the alternative is "hidden-xs" which hides content on smaller displays. :) Happy coding!

Answer 2

You can use media queries in CSS to do this. You would give the element that would be the higher up element, a class or id and then set its width to 100% and its display to inline-block or block when the screen is less than a certain size (or greater than a certain size).
With this code every .element will be 100% width then the screen size is 600px or less. if you wanted it to be when the screen is greater than or equal to 600px then you would use min-width: 600px instead.
#media (max-width: 600px) {
.element {
display: inline-block;
width: 100%;
}
}

Answer 3

<div class="container-fluid bg-1 text-center">
<h2>MessageOfTheDay</br>
</br></h2>
<p style="margin-bottom: 100px;" class='workdBreak'>SOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</p>
<h1 style="margin-bottom: 100px;">XXXXXX</br>
<span class='workdBreak'>
SOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</br>
SOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</h1>
</div>
</span>
#media only screen and (max-width : 480px) {
.workdBreak{
word-wrap:break-word;
}
}
Used word-wrap css property to break word if it is larger than width of container.
http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
http://www.w3schools.com/cssref/css3_pr_word-break.asp
Bootsrap media query
/========== Mobile First Method ==========/
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}