Text wrapping in responsive design

1

On my website I have a title bar consisting of 4-letter acronym in 48px Arial, followed by 4 words - the full name of my organization in 11px Arial.

Problem: On a narrow screen the last 2 words wrap away out of the title bar.

I tried to place the text into a table, but don’t get the bottom of the textstrings to align. I found no way to finetune the exact text location inside the table cells.

The wrapping in table principally works, however I like to have the bottom line filled while only the overflow goes to the line above.

Do you have any idea what I could do?

2

That’s not really a MODX question… but if you can provide the exact markup and styles you’re using for it (perhaps as a codepen), I’m sure there are people that can give you some CSS tips :wink:

3

I have a running example of my page extracted into a html file and paste the 70 lines here (don’t know how to upload zip file in forum).

Thanks for your help!

.

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<html>
<head>
<style>
#top{background-color: #000000; height:38px;width:100%;}
ul.top{margin:0;padding-left:12px;list-style:none;color:#FFF;}
#lang_menu{list-style-type:none; margin-left:60px; padding-top:10px;}
#lang_menu li{display:inline; padding-right:15px;}
#lang_menu a{text-decoration:none; color:#fff;font-weight:normal;}
#lang_menu a:hover{color:#ffb833;text-decoration:none;}

#header2{position:relative;top:0px;height:52px;width:89%;background-color:#357dff;}
#header2 {margin:0;font-size:48px;color:#FFF;font-weight:normal;padding-left:40px;padding-top:0px;letter-spacing:1px;}
#header2 a{color:#FFF;text-decoration:none;}
#header2 a:hover{text-decoration:underline;}
#header2 h2{margin:0;font-size:14px;font-weight:normal;color:#FFF;padding-left:178px;}

#header{position:relative;top:0px;height:55px;width:100%;margin-top:0px;background-color: #357dff;}
#header h1{margin:0;font-size:48px;color:#FFF;font-weight:normal;padding-left:58px;padding-top:0px;letter-spacing:1px;}
#header h1 a{color:#FFF;text-decoration:none;}
#header h1 a:hover{text-decoration:underline;}
#header h2{margin:0;font-size:14px;font-weight:normal;color:#FFF;padding-left:178px;}

#logo{float:left;height:48px;margin-top:2px;}
#logo a:hover{color:#ffb833;text-decoration:none;}

#menulinks{ float:right;  margin-top:15px; margin-right:18px;}
#menulinks ul{list-style:none;padding:0;margin:0;}
#menulinks li{display:inline;margin-right:25px;}
#menulinks a{color:#fff;text-decoration:none;font-weight:bold;}
#menulinks a:hover{color:#ffb833;text-decoration:none;}
</style>
</head>

<body>
<div id="top">
<div id="lang_menu">
	<li><a href="https://mics-munich.de/de/">Deutsch</a></li>
  <li><a href="https://mics-munich.de/en/">English</a></li>
  <li><a href="https://mics-munich.de/fr/">Français</a></li>
  <li><a href="https://mics-munich.de/es/">Español</a></li>
</div><!-- end lang_menu -->
</div><!-- end top -->

<div id="header2">
<div id="logo">
  <a title="home" href="[[+site_url]]">mics</a> 
  <span style="font-size:small;font-family:arial;font-weight:bold;">Munich International Choral Society</span>
</div>
</div><!-- end header2 -->

<div id="header">
<div id="menulinks">
  <ul>    
    <li><a href="">Home</a></li>
    <li><a href="konzerte/">Konzerte</a></li>
    <li><a href="dirigentin.html">Dirigentin</a></li>    
    <li><a href="links.html">Links</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
    <li><a href="intern/">MICS-Intern</a></li> 
  </ul>
</div><!-- end menulinks -->
</div><!-- end header -->

<!-- [[*content]] -->

</body>
</html>
4

This is actually a bit tricky, as in css you can wrap the text, use an ellipsis when there is too much text, but both are not always acceptable.

I googled a bit and found this link, read the second answer down for possible solutions. Using something like viewpoint units for text size relative to screen size is pretty innovative, but there seem to be some drawbacks.

A more direct way is to use @media queries for the smallest screens. That just applies special rules when the device registers as a small enough screen. There, you can pull the title div to 100% and push the text down to something manageable. You still have to account for various screen sizes, so…yeah another possible drawback

You’d be better off of a css forum tbh :slight_smile:

5

Not sure if you’re trying to force the Acronym and full name to stay on one line at all screen sizes, or if you just want more control over how it wraps.

To keep it always on one line you will need to change the font size for smaller screens, using media queries is the standard way to accomplish this.

But if you are just trying to keep the name of the organization from breaking, you can:

  1. Add non-breaking spaces between the words:
Munich&nbsp;International&nbsp;Choral&nbsp;Society
  1. Or you can add
white-space:nowrap;

to the styles on that span.

Keep in mind that the above methods will force the line to break out of its container if the container is too narrow - so unless you pay careful attention to font sizes you might lose the end of the line on small screens.

I would recommend learning about media queries… And searching StackOverflow or CSS Tricks for these basic CSS questions. 99% of your questions will already be answered there.


1 Like
7

Thanks Lucy for your detailed comments.
My goal is to have acronym and full name on same line AND (if it does not fit) wrap the text. At the end it should be legible - small font may be difficult here.
I managed to put it into a table, The “sup” lines up the large and small text on the same horizontal line.

<div id="logo">
<table style = "table-layout: auto;">
  <tr>
    <td><span style="font-size:48px;font-weight:normal;padding-right:8px;"><a title="home" href="[[+site_url]]">mics</a></span></th>
    <td span style="vertical-align:bottom;text-align: left;font-size:14px;font-family:arial;font-weight:bold;"><sup>Munich International Choral Society</sup></span></td>
  </tr>
</table>
</div>
1 Like
8

Ok - so you want the text to wrap if necessary but NOT wrap below the acronym… But… Why not use columns or grids? Using a table in this way is confusing for screen readers and not a proper use of a table. Tables are for data not layout. A simple flex grid will do what you want, give you more control over the width and behavior of each box, and give you a better, more accessible page structure. Also they are really fun.

1 Like
9

Looking at your markup a little more closely, and just wondering if you know you have a bunch of errors? The first td has no closing tag, but there is a closing th tag with no opening tag. In the second td you have a missing >, followed by a span with a missing <. When you fix those errors I think you’ll find that the text in the two cells no longer lines up on the bottom.

This what your corrected markup looks like with the result:
image

Also, probably no need to write table-layout: auto as that’s the default.

1 Like
10

You can check your code here

https://jigsaw.w3.org/css-validator/

Tables are not favored today, especially not in a case like this. The output is liable to look pretty bad with tables, they’re just not flexible enough. This is a general trend with websites post-CSS and things like titles are very rarely made with tables.

1 Like
11

I reworked my header to do it completely with Flexbox.
I now have close to what I’m expecting, however it has tho problems I didn’t understand:

<!DOCTYPE html>
<html>
  <head>
  	 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Example Flexbox Responsive Menu</title>
	    <!-- Place your kit's code here -->
    <script src="https://kit.fontawesome.com/675214a18b.js"></script>
  <style>
body{
	margin:0;
}
.Logobar {
  background-color: #357dff;
  display: flex;
  padding-left: 16px;
  font-family: sans-serif;
  color: white;
}
.Logobar__Items {
  display:flex;
  align-items: baseline;
}
.Logobar__Link {
  padding-right: 12px;
}
.Logobar__Items--right {
  margin-left:auto;
}
.Logobar__brand {
	font-size:48px;
}
.Logobar__brandname {
	font-size:12px;
}
.Logobar__Hamburger {
	margin-right: 16px;
	margin-top: 25px;
	float:right;
}
.Navbar {
  background-color: #357dff;
  display: flex;
  padding-left: 4px;
  padding-bottom: 12px;
  font-family: sans-serif;
  color: white;
  justify-content: flex-end;
}
.Navbar__Link {
  padding-right: 12px;  padding-left: 12px;
}
.Navbar__Items {
  display: flex;
}
.Navbar__Items a {
	color: white;
	text-decoration:none;
}
.Navbar__Items a:hover{
	color:#ffb833;text-decoration:underline;
}

@media only screen and (max-width: 530px) {
  .Navbar__Items,
  .Navbar {
    flex-direction: column;
  }
  .Navbar__Items {
    display:none;
  }
.Navbar__Link-toggle {
  align-self: flex-end;
  display: initial;
  cursor: pointer;
}
}
@media only screen and (min-width: 531px) {
.Navbar__Link-toggle { display: none; }
}
.Navbar__ToggleShow {
    display: flex;
}
</style>
<html>
	<!-- Logo plus text plus hamburger (hidden on larger screens) -->
<div class="Logobar">
	<div class="Logobar__Items">
    <div class="Logobar__Link Logobar__brand">
      mics
    </div>
    <div class="Logobar__Link Logobar__brandname">
      Munich International Choral Society
    </div>
    <div class="Logobar__Link Navbar__Link-toggle">
      <i class="fas fa-bars"></i>
    </div>
  </div>
</div>
	<!-- Link Menu (hidden on small screens) -->
<div class="Navbar">
  <nav class="Navbar__Items">
    <div class="Navbar__Link">
      <a href="">Home</a>
    </div>
    <div class="Navbar__Link">
      <a href="#konzerte">Konzerte</a>
    </div>
    <div class="Navbar__Link">
      <a href="#dirigentin">Dirigentin</a>
    </div>
    <div class="Navbar__Link">
      <a href="#links">Links</a>
    </div>
    <div class="Navbar__Link">
      <a href="#kontakt">Kontakt</a>
    </div>
    <div class="Navbar__Link">
      <a href="#intern">MICS-Intern</a>
    </div>
  </nav>
</div>
<script>
function classToggle() {
  const navs = document.querySelectorAll('.Navbar__Items')
  navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
}
document.querySelector('.Navbar__Link-toggle')
  .addEventListener('click', classToggle);
</script>
</html>

  1. Wrapping of Text happens BELOW the Baseline - I want it ABOVE the baseline - next to the large acronym.

  2. I put in a Hamburger menu to get a dropdown menu on small screens. I didn’t manage to put it to the right of the TitleBar. It seems that Flexbox doesn’t like a single element floating right while all others float left.

Can you please give me a hint?

1 Like
12

I don’t exactly understand the first one, but you mean the text-wrapping pushes the content below and you want it to stay up? That sounds like line height or margins can help.

Second one, you can’t float:right over the menu? Another possibility of margin to push the flexbox over a bit. You may have trouble here and could consider putting the flexbox and the menu into to divs that sit side by side