0

Initially, my header takes the single-line form:

Title • Description

When the width is decreased, I'd like it to display as two-lines, without the bullet point:

Title
Description

I've searched, and can't find the the most elegant/generally accepted way to do this. There doesn't seem to be any way to track a height change without additional libraries, which are not preferred. We do have jQuery to work with though.

Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
user1234
  • 27
  • 1
  • 4
  • are you familiar with `Twitter Bootstrap` http://getbootstrap.com/css/#grid and `Zurb Foundation` http://foundation.zurb.com/grid.html – Hamza Rashid Apr 12 '17 at 03:01
  • @HamzaRashid I am familiar. How could those help? With this small addition, I'm hoping to not introduce any new large frameworks. I suppose if there is an elegant solution to this problem, maybe it's time we considered them for wider use. – user1234 Apr 12 '17 at 03:05
  • you can also write your own code for this, search for `CSS @media query` – Hamza Rashid Apr 12 '17 at 03:06
  • I am actually just using flex box on the containing div of these two elements. So when that flex element gets narrow enough, and it becomes two lines, I'd like to hide that bullet point. – user1234 Apr 12 '17 at 03:07
  • With a media query though, I have to predict when it becomes two lines? There will be an intermediate point where it is two lines, but the bullet points is still there. – user1234 Apr 12 '17 at 03:09
  • see my answer and mark it correct if it helps you. – Hamza Rashid Apr 12 '17 at 03:26
  • @HamzaRashid Thanks, trying it out now! – user1234 Apr 12 '17 at 03:32
  • I don't think there is any pure CSS solution, as media query is based on screen, not element (Bootstrap grid system uses media query). Please check http://stackoverflow.com/questions/12251750/can-media-queries-resize-based-on-a-div-element-instead-of-the-screen for some previous discussion. Unfortunately, we don't have element query (@element) – shaochuancs Apr 12 '17 at 03:43

2 Answers2

0

Add Twitter Bootstrap dependency to <head> section 

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

Sample code:

<div class="row">
    <div class="col-md-6">Title</div>
    <div class="col-md-6"><span class="hidden-xs hidden-sm">•</span> Description</div>
</div>

You can adjust when the text show as single line or multiple line using col-lg-6, col-md-6, col-sm-6 or col-xs-6.

Reference

http://getbootstrap.com/css/#grid

Using Bootstrap you can control when "bullet" shows or hides using .hidden-xs, .hidden-sm, .hidden-md or .hidden-lg CSS classes.

Reference

http://getbootstrap.com/css/#responsive-utilities

Hamza Rashid
  • 1,329
  • 15
  • 22
0

Option 1

using Bootstrap Grid System (The easiest way)

<div class="row">
  <div class="col-sm-6">Title</div>
  <div class="col-sm-6">Description</div>
</div>

Your content will show 2 column on tablet, destop & large desktop

Title • Description

and will show vertical-stack on mobile:

Title

Description

Option 2

using CSS Media Query

HTML

<div class="title">Title</div>
<div class="desc">Desc</div>

CSS

@media (min-width: 320px) {
  .title, .desc {
    display: inline;
    width: 50%
  }
@media (max-width: 320px) {
  .title, .desc {
    display: block;
    width: 100%
  }

Your content will show 2 column on tablet, destop & large desktop (min 320px)

Title • Description

and will show vertical-stack on mobile: (max 320px)

Title

Description

Ryan Rahman Setiawan
  • 25
  • 5