CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Exec
Exec

Reputation: 407

How do I join multiple lines to a single one if the page is viewed on mobile?

Using Twitter Bootstrap (3.3.X), I want to display these lines on desktop:

Some info
Some more info
Even more stuff

And the same on mobile view should display as (pipes as in literal character, not separate blocks if possible):

Some info | Some more info | Even more stuff

This would be on the right side of a div defined with col-md-8, or on a single line above the div if it's on mobile.

Any ideas?

Upvotes: 0

Views: 35

Answers (2)

Omar Yafer
Omar Yafer

Reputation: 853

Optionally if you are using Twitter Bootstrap 3 you can make use of the visible-*-* classes which will let you hide or show content depending on the screen size.

Example Fiddle

So you could use 

<p class="custom-menu">
Some info
<span class="visible-md-inline visible-sm-inline visible-xs-inline">/</span>
</p>
<p class="custom-menu">
Some more info
<span class="visible-md-inline visible-sm-inline visible-xs-inline">/</span>
</p>
<p class="custom-menu">
Even more stuff
<span class="visible-md-inline visible-sm-inline visible-xs-inline">/</span>
</p>

You could even change the "/" character for a glyphicon o another kind of code.

and for CSS

/*Medium Media*/
@media (max-width:1199px) {
  p.custom-menu{display: inline;}
}

/*Small Media*/
@media (max-width:991px) {
  p.custom-menu{display: inline;}
}

/*Extra small Media*/
@media (max-width: 768px){
  p.custom-menu{display: inline;}
}

Choose whichever media query suits your needs the best.

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122037

You can do this with :after pseudo class and display: inline-block

DEMO

@media(max-width: 768px) {
  p {
    display: inline-block;
  }

  p:not(:last-child):after {
    content: " |";
  }
}

<p>Some info</p>
<p>Some more info</p>
<p>Lorem ipsum</p>

Upvotes: 2

Related Questions