CODEWITHSUNDEEP
htmlcss
Max
Max

Reputation: 387

Make text in different columns go to new line the same way

enter image description here I have a table with a lot of columns that contain text, image and text. I used some CSS to make the images resize the same way. Now when I resize the browser the text breaks in multiple lines. I would like for it to happen to all the text at the same point/time but I have no idea how to do this.

Full HTML & CSS code, with working example on JSFiddle: http://jsfiddle.net/zmyfjrdv/14/

Relevant part of the HTML code:

  <tr id="geqtablefaderrow" class="geqtablerow">
    <td class="geq">100 Hz <br><img class="geqfaderimage" data-frequency="100" src="https://i.imgur.com/ImkN7ng.png"><br>100 Hz</td>
    <td class="geq">200 Hz <br><img class="geqfaderimage" data-frequency="200" src="https://i.imgur.com/ImkN7ng.png"><br>200 Hz</td>
    <td class="geq">400 Hz <br><img class="geqfaderimage" data-frequency="400" src="https://i.imgur.com/ImkN7ng.png"><br>400 Hz</td>
    <td class="geq">800 Hz <br><img class="geqfaderimage" data-frequency="800" src="https://i.imgur.com/ImkN7ng.png"><br>800 Hz</td>
    <td class="geq">1.6 kHz <br><img class="geqfaderimage" data-frequency="1600" src="https://i.imgur.com/ImkN7ng.png"><br>1.6 kHz</td>
    <td class="geq">3.15 kHz <br><img class="geqfaderimage" data-frequency="3150" src="https://i.imgur.com/ImkN7ng.png"><br>3.15 kHz</td>
    <td class="geq">6.3 kHz <br><img class="geqfaderimage" data-frequency="6300" src="https://i.imgur.com/ImkN7ng.png"><br>6.3 kHz</td>
    <td class="geq">12.5 kHz <br><img class="geqfaderimage" data-frequency="12500" src="https://i.imgur.com/ImkN7ng.png"><br>12.5 kHz</td>
  </tr>

Relevant part of the CSS code:

table.geqtable
{
    margin: auto;
    margin-top: 30px;
    border: 1px solid black;
    padding: 10px;
    box-shadow: 0px 2px 4px 0px #666666;
    text-align: center;
    width: 97%;
    table-layout: fixed;
}

tr.geqtablerow
{
    border: 1px solid black;
}

td.geqtablecell
{
    margin: 0px;
    border: 0px;
    padding: 1px;
}

.geqfaderimage
{
    max-width: 100%;
    height: auto;
    width: 100%;
    float: none;
}

Any ideas on how I could achieve the desired behaviour?

Upvotes: 2

Views: 54

Answers (2)

tao
tao

Reputation: 90103

There are multiple ways to achieve it. One would be to fiddle with the font-size as the device gets smaller but, at some point, to make a change in the font-size that will make them all wrap.

The other is to remove <br>s and wrap all texts in <span> tags, so their width can be controlled via CSS:

...
    <td class="geq">
      <span>100 Hz</span>
      <img class="geqfaderimage" data-frequency="100" src="https://i.imgur.com/ImkN7ng.png">
      <span>100 Hz</span>
    </td>
...

@media (max-width: 720px) {
 .geq span {
    max-width: 50px;
    display: inline-block;
 }
}

See it here.

Or you could render some <br>eakers and toggle their display property. Or you could make three rows and align elements vertically so they look aligned even when some break and some do not.

Upvotes: 1

connexo
connexo

Reputation: 56753

Just insert a <br class="frequency-divider" /> tag between the number and the unit (Hz/kHz).

<td class="geq">100<br class="frequency-divider" /> Hz ... </td>

Then use a media query (adjust to your needs) to set that tag to display: none; when you don't need it:

@media screen and (min-width: 800px) {
    .frequency-divider { display: none; }
}

Here you go:

*
{
	font-family: 'Montserrat', sans-serif;
}

body
{
	margin: auto;
	font-size: large;
}

table.geqtable
{
	margin: auto;
	margin-top: 30px;
	border: 1px solid black;
	padding: 10px;
	box-shadow: 0px 2px 4px 0px #666666;
	text-align: center;
	width: 97%;
	table-layout: fixed;
}

tr.geqtablerow
{
	border: 1px solid black;
}

td.geqtablecell
{
	margin: 0px;
	border: 0px;
	padding: 1px;
}

.volume-control
{
	width: 100%;
}

.geqfaderimage
{
	max-width: 100%;
	height: auto;
	width: 100%;
	float: none;
}

button.control-button
{
	font-size: x-large;
}


h1
{
	margin: 0px 0px 10px 0px;
	font-size: xx-large;
	text-decoration: underline;
}


h2
{
	margin: 10px 0px;
	font-size: x-large;
	text-decoration: underline;
}

h3
{
	border: 0px;
	padding: 0px;
	margin: 0px 0px 5px 0px;
	font-size: large;
	text-decoration: underline;
}

h4
{
	margin: 10px 0px;
	font-size: large;
	text-decoration: underline;
}

a
{
	color: #0000BB;
}

a:hover
{
	color: #000000;
}

.align-left
{
	text-align: left;
}

.align-center
{
	text-align: center;
}

.align-right
{
	text-align: right;
}

@media screen and (min-width: 800px) {
    .frequency-divider { display: none; }
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:900" rel="stylesheet">
<table class="geqtable">
    <tbody>
      <tr class="geqtablerow">
        <td class="geqtablecell" colspan="8">
          <h1 class="align-center">Frequency Trainer</h1>
          <hr>
        </td>
      </tr>
  <tr id="geqtablefaderrow" class="geqtablerow">
    <td class="geq">100<br class="frequency-divider" /> Hz <br><img class="geqfaderimage" data-frequency="100" src="https://i.imgur.com/ImkN7ng.png"><br>100<br class="frequency-divider" /> Hz</td>
    <td class="geq">200<br class="frequency-divider" /> Hz <br><img class="geqfaderimage" data-frequency="200" src="https://i.imgur.com/ImkN7ng.png"><br>200<br class="frequency-divider" /> Hz</td>
    <td class="geq">400<br class="frequency-divider" /> Hz <br><img class="geqfaderimage" data-frequency="400" src="https://i.imgur.com/ImkN7ng.png"><br>400<br class="frequency-divider" /> Hz</td>
    <td class="geq">800<br class="frequency-divider" /> Hz <br><img class="geqfaderimage" data-frequency="800" src="https://i.imgur.com/ImkN7ng.png"><br>800<br class="frequency-divider" /> Hz</td>
    <td class="geq">1.6<br class="frequency-divider" /> kHz <br><img class="geqfaderimage" data-frequency="1600" src="https://i.imgur.com/ImkN7ng.png"><br>1.6<br class="frequency-divider" /> kHz</td>
    <td class="geq">3.15<br class="frequency-divider" /> kHz <br><img class="geqfaderimage" data-frequency="3150" src="https://i.imgur.com/ImkN7ng.png"><br>3.15<br class="frequency-divider" /> kHz</td>
    <td class="geq">6.3<br class="frequency-divider" /> kHz <br><img class="geqfaderimage" data-frequency="6300" src="https://i.imgur.com/ImkN7ng.png"><br>6.3<br class="frequency-divider" /> kHz</td>
    <td class="geq">12.5<br class="frequency-divider" /> kHz <br><img class="geqfaderimage" data-frequency="12500" src="https://i.imgur.com/ImkN7ng.png"><br>12.5<br class="frequency-divider" /> kHz</td>
  </tr>
      <tr>
        <td class="geqtablecell" colspan="8">
          <hr /><br />
          Volume:<br />
          <br />
          <input id="volume-control" type="range" min="0" max="20" value="2" step="0.1" class="volume-control"><br>
          <br>
          <button type="button" id="start-button" class="control-button">Start</button>
          <button type="button" id="stop-button" class="control-button">Stop</button><br>
          <br>
          <button type="button" id="next-button" class="control-button">Next</button>
        </td>
      </tr>
    </tbody>
  </table>

Upvotes: 1

Related Questions