CODEWITHSUNDEEP
csstwitter-bootstrap-3responsive-designresponse
Wojtkovy
Wojtkovy

Reputation: 111

Bootstrap responsive on mobile devices

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

Upvotes: 0

Views: 6996

Answers (3)

Anand
Anand

Reputation: 111

<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) {

}

Upvotes: 0

Metroidaron
Metroidaron

Reputation: 357

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!

Upvotes: 1

Kyle
Kyle

Reputation: 403

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%;
  }
}

Upvotes: 0

Related Questions