oddz
October 1, 2014, 8:06pm
1
Can someone tell me why display: table-row-group isn’t working here. I haven’t found much on the web about it except for that it exists and should replicate behavior of tbody. However, it is not doing that.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Registration Form</title>
<style type="text/css">
#container {
width: 980px;
margin: 0 auto;
}
#register {
background-color: red;
}
#nav-social-login {
background-color: blue;
}
.text-or {
background-color: green;
}
#register {
display: table;
}
#register fieldset {
display: table-row-group;
}
#register div {
display: table-row;
}
#register div label,
#register div input {
display: table-cell;
}
</style>
</head>
<body>
<div id="container">
<h1>Create An Account</h1>
<form action="/" method="POST" id="register">
<fieldset>
<legend>Register With Your Email</legend>
<div>
<label for="first-name">First Name</label>
<input type="text" id="first-name" name="first_name">
</div>
<div>
<label for="last-name">First Name</label>
<input type="text" id="last-name" name="last_name">
</div>
<div>
<label for="email">Email Address</label>
<input type="text" id="email" name="email">
</div>
<div>
<label for="newsletter-signup">Sign Up For Newsletter</label>
<input type="text" id="newsletter-signup" name="newsletter_signup">
</div>
</fieldset>
<fieldset>
<legend>Login Information</legend>
<div>
<label for="pwd">Password</label>
<input type="text" id="pwd" name="pwd">
</div>
<div>
<label for="pwd-confirm">Confirm Password</label>
<input type="text" id="pwd-confirm" name="pwd_confirm">
</div>
</fieldset>
</form>
<p class="text-or">Or</p>
<div id="nav-social-login">
<h2>Register With Your Social Account</h2>
<ul>
<li><a href="#">Register With Facebook</a></li>
<li><a href="#">Register With Twitter</a></li>
<li><a href="#">Register With Google</a></li>
</ul>
</div>
</div>
</body>
</html>
This is what I’m trying to replicate though without tables. The advantage of using tables here is that the string lengths can change for labels and the inputs will always be aligned. Though I don’t even know if it is possible to maintain that flexibility considering I also need colspan and that isn’t possible with only css.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Registration Form</title>
<style type="text/css">
#container {
width: 980px;
margin: 0 auto;
}
#register {
background-color: red;
}
#nav-social-login {
background-color: blue;
}
.text-or {
background-color: green;
}
#register {
display: table;
}
#register fieldset {
display: table-row-group;
}
#register div {
display: table-row;
}
#register div label,
#register div input {
display: table-cell;
}
#register legend {
display: table-row;
}
#register legend:before {
content: " ";
width: 0;
display: table-cell;
}
#register legend span {
display: table-cell;
}
</style>
</head>
<body>
<div id="container">
<h1>Create An Account</h1>
<form action="/" method="POST" id="register">
<table>
<tbody>
<tr>
<td colspan="2">
<h2>Login Information</h2>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td><label for="first-name">First Name</label></td>
<td><input type="text" id="first-name" name="first_name"></td>
</tr>
<tr>
<td><label for="last-name">First Name</label></td>
<td><input type="text" id="last-name" name="last_name"></td>
</tr>
<tr>
<td><label for="email">Email Address</label></td>
<td><input type="text" id="email" name="email"></td>
</tr>
<tr>
<td><label for="newsletter-signup">Sign Up For Newsletter</label></td>
<td><input type="text" id="newsletter-signup" name="newsletter_signup"></td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="2">
<h2>Login Information</h2>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td><label for="pwd">Password</label></td>
<td><input type="text" id="pwd" name="pwd"></td>
</tr>
<tr>
<td><label for="pwd-confirm">Confirm Password</label></td>
<td><input type="text" id="pwd-confirm" name="pwd_confirm"></td>
</tr>
</tbody>
</table>
</form>
<p class="text-or">Or</p>
<div id="nav-social-login">
<h2>Register With Your Social Account</h2>
<ul>
<li><a href="#">Register With Facebook</a></li>
<li><a href="#">Register With Twitter</a></li>
<li><a href="#">Register With Google</a></li>
</ul>
</div>
</div>
</body>
</html>
PaulOB
October 1, 2014, 8:54pm
2
Hi,
The problem is that fieldset is a special element and doesn’t apply all the css rules you may expect. I never use the fieldset for anything apart from borders as I’ve seen it fail many times when I;ve used it as a structural container.
Your code actually works fine if you just use a div instead of the fieldset and legend so its not the CSS that’s at fault.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Registration Form</title>
<style type="text/css">
#container {
width: 980px;
margin: 0 auto;
}
#register {
background-color: red;
}
#nav-social-login {
background-color: blue;
}
.text-or {
background-color: green;
}
#register {
display: table;
}
#register .fieldset {
display: table-row-group;
}
#register div {
display: table-row;
}
#register div label, #register div input {
display: table-cell;
}
</style>
</head>
<body>
<div id="container">
<h1>Create An Account</h1>
<form action="/" method="POST" id="register">
<div class="fieldset">
<div>
<label for="first-name">First Name</label>
<input type="text" id="first-name" name="first_name">
</div>
<div>
<label for="last-name">First Name</label>
<input type="text" id="last-name" name="last_name">
</div>
<div>
<label for="email">Email Address</label>
<input type="text" id="email" name="email">
</div>
<div>
<label for="newsletter-signup">Sign Up For Newsletter</label>
<input type="text" id="newsletter-signup" name="newsletter_signup">
</div>
</div>
<div class="fieldset">
<div>
<label for="pwd">Password</label>
<input type="text" id="pwd" name="pwd">
</div>
<div>
<label for="pwd-confirm">Confirm Password</label>
<input type="text" id="pwd-confirm" name="pwd_confirm">
</div>
</div>
</form>
<p class="text-or">Or</p>
<div id="nav-social-login">
<h2>Register With Your Social Account</h2>
<ul>
<li><a href="#">Register With Facebook</a></li>
<li><a href="#">Register With Twitter</a></li>
<li><a href="#">Register With Google</a></li>
</ul>
</div>
</div>
</body>
</html>
Of course you then lose the benefit and structure of the fieldset.
You could add a heading I think to mimic the appearance.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Registration Form</title>
<style type="text/css">
#container {
width: 980px;
margin: 0 auto;
}
#register {
background-color: red;
}
#nav-social-login {
background-color: blue;
}
.text-or {
background-color: green;
}
#register {
display: table;
}
#register .fieldset {
display: table-row-group;
}
#register div {
display: table-row;
}
#register div label, #register div input {
display: table-cell;
}
</style>
</head>
<body>
<div id="container">
<h1>Create An Account</h1>
<form action="/" method="POST" id="register">
<div class="fieldset">
<h2>Login Information</h2>
<div>
<label for="first-name">First Name</label>
<input type="text" id="first-name" name="first_name">
</div>
<div>
<label for="last-name">First Name</label>
<input type="text" id="last-name" name="last_name">
</div>
<div>
<label for="email">Email Address</label>
<input type="text" id="email" name="email">
</div>
<div>
<label for="newsletter-signup">Sign Up For Newsletter</label>
<input type="text" id="newsletter-signup" name="newsletter_signup">
</div>
</div>
<div class="fieldset">
<h2>Login Information</h2>
<div>
<label for="pwd">Password</label>
<input type="text" id="pwd" name="pwd">
</div>
<div>
<label for="pwd-confirm">Confirm Password</label>
<input type="text" id="pwd-confirm" name="pwd_confirm">
</div>
</div>
</form>
<p class="text-or">Or</p>
<div id="nav-social-login">
<h2>Register With Your Social Account</h2>
<ul>
<li><a href="#">Register With Facebook</a></li>
<li><a href="#">Register With Twitter</a></li>
<li><a href="#">Register With Google</a></li>
</ul>
</div>
</div>
</body>
</html>
I couldn’t see a way of utilising the fieldset in that structure though.
PaulOB
October 1, 2014, 9:06pm
3
My last example isn’t really working as the heading pushes the second cells further over as I expected.
oddz
October 1, 2014, 9:14pm
4
I’m not even getting the effect I’m after using tables. The problem is each table cell is taking up 50% of the available space instead of the distributing the spacing based on the area of the content inside. The below is what I’m after where the left side of the inputs will allows align with the longest label regardless of the number of characters in the label. In this case I’m dealing with supporting multiple languages so the labels will change per language but I still want to have everything line up without adding language specific overrides. I’m not really sure this is possible unless I were to use flex-box which I can’t. I know I could do this with some JS but I would rather not.
ronpat
October 2, 2014, 9:55am
5
I’m not very good with forms and I don’t mind a few extra divs and things, so I gave this a go just for fun. It is possible to eliminate the trow and tcell classnames but doing so makes it harder to grasp the layout, so I chose to leave them in place. There may be errors :-/ but it looks like your image and is 99% fluid when font-size only is resized… drat that darned check box.
I couldn’t find a useful place to for table-row-group, so you won’t find it here.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!--
http://www.sitepoint.com/community/t/display-table-row-group-not-working/99690
Display: table-row-group not working
oddz
-->
<title>loginForm (css tables)</title>
<style>
html,body {
margin:0;
padding:0;
background:#333;
color:333;
}
#register {
display:table;
white-space:nowrap;
background:#fff;
padding:1em;
margin:0 auto;
/* outline:1px solid red; /* TEST Outline */
}
.title {
font-size:1.25em;
font-family:Georgia, serif;
text-transform:uppercase;
text-align:left;
padding:0;
margin:0;
}
.fieldwrap {
display:table;
width:100%;
text-align:right;
padding-bottom:.75em;
/* outline:1px dotted blue; /* TEST Outline */
}
.trow {
display:table-row;
/* outline:1px solid lime; /* TEST Outline */
}
.tcell {
display:table-cell;
vertical-align:middle;
padding:.5em 0;
/* outline:1px dotted red; /* TEST Outline */
}
.tcell:first-child {
padding-right:.5em;
}
.tcell:nth-child(2) {
width:10%;
}
label {
color:333;
font-weight:bold;
font-family:Calibri, sans-serif;
/* outline:1px dotted red; /* TEST Outline */
}
.required:before {
content:"*";
display:inline-block;
vertical-align:middle;
color:#f00;
padding-right:.25em;
}
.checkbx {
text-align:left;
}
input[type="text"] {
border:1px solid #000;
padding:.375em 0;
width:20em;
}
input[type="submit"] {
color:#fff;
background:#000;
font-size:1.15em;
text-transform:uppercase;
padding:.25em 1.5em;
}
.submitbox {
text-align:right;
}
</style>
</head>
<body>
<form id="register" action="/" method="post">
<p class="title">register with your email</p>
<div class="fieldwrap">
<div class="trow">
<div class="tcell"><label class="required" for="fname">First Name</label></div>
<div class="tcell"><input type="text" id="fname" width="40"></div>
</div>
<div class="trow">
<div class="tcell"><label class="required" for="lname">Last Name</label></div>
<div class="tcell"><input type="text" id="lname"></div>
</div>
<div class="trow">
<div class="tcell"><label class="required" for="emailaddr">Email Address</label></div>
<div class="tcell"><input type="text" id="emailaddr"></div>
</div>
<div class="trow">
<div class="tcell"><label for="signup">Sign Up For Newsletter</label></div>
<div class="tcell checkbx"><input type="checkbox" value="submit" id="signup"></div>
</div>
</div>
<p class="title">login information</p>
<div class="fieldwrap">
<div class="trow">
<div class="tcell"><label class="required" for="pword">Password</label></div>
<div class="tcell"><input type="text" id="pword"></div>
</div>
<div class="trow">
<div class="tcell"><label class="required" for="pwdconf">Confirm Password</label></div>
<div class="tcell"><input type="text" id="pwdconf"></div>
</div>
</div>
<div class="submitbox"><input type="submit" value="submit"></div>
</form>
</body>
</html>
PaulOB
October 2, 2014, 11:47am
6
Nice demo Ron
The only problem I see is that you fixed the width of the input. If a fixed width input is acceptable then it can be done with the original code also.
e.g.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Registration Form</title>
<style type="text/css">
#container {
width: 980px;
margin: 0 auto;
}
#register {
background-color: red;
display: table;
text-align:right;
white-space:nowrap;
}
#register * {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
#register fieldset {
border:none;
padding:0;
margin:0 0 10px
}
#register fieldset legend {
float:left;
width:100%;
clear:both;
text-align:left;
padding:10px;
margin:0 0 10px;
}
#nav-social-login {
background-color: blue;
}
.text-or {
background-color: green;
}
#register fieldset div {
clear:both;
overflow:hidden;
}
#register div label, #register div input {
display:inline-block;
vertical-align:middle;
padding:5px;
margin:5px;
}
#register div input[type=text] {
border:1px solid #000;
width:20em;
}
</style>
</head>
<body>
<div id="container">
<h1>Create An Account</h1>
<form action="/" method="POST" id="register">
<fieldset>
<legend>Register With Your Email that spans the top</legend>
<div>
<label for="first-name">First Name</label>
<input type="text" id="first-name" name="first_name">
</div>
<div>
<label for="last-name">First Name</label>
<input type="text" id="last-name" name="last_name">
</div>
<div>
<label for="email">Email Address</label>
<input type="text" id="email" name="email">
</div>
<div>
<label for="newsletter-signup">Sign Up For Newsletter longer label</label>
<input type="text" id="newsletter-signup" name="newsletter_signup">
</div>
</fieldset>
<fieldset>
<legend>Login Information that spans the middle</legend>
<div>
<label for="pwd">Password</label>
<input type="text" id="pwd" name="pwd">
</div>
<div>
<label for="pwd-confirm">Confirm Password</label>
<input type="text" id="pwd-confirm" name="pwd_confirm">
</div>
</fieldset>
</form>
<p class="text-or">Or</p>
<div id="nav-social-login">
<h2>Register With Your Social Account</h2>
<ul>
<li><a href="#">Register With Facebook</a></li>
<li><a href="#">Register With Twitter</a></li>
<li><a href="#">Register With Google</a></li>
</ul>
</div>
</div>
</body>
</html>
oddz
October 2, 2014, 1:02pm
7
Fixed width isn’t acceptable. The whole point of this is not to use a fixed width. If I could use a fixed width I would have never asked this question because that is simple.
ronpat
October 2, 2014, 2:23pm
8
Fair enough.
With a couple of modifications to my div-heavy code, it will adapt to its containing element (or to however else you set the width OTHER THAN 100%) and the input fields will do the same. Really fluid, and scalable. (My first submission was only scalable, not fluid as I erroneously stated.) As before, I feel reasonably sure it can be simplified. (#register is a block that contains padding, if assigned a width of 100%, it will overshoot its container.)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!--
http://www.sitepoint.com/community/t/display-table-row-group-not-working/99690
Display: table-row-group not working
oddz
-->
<title>loginForm (css tables)</title>
<style>
html,body {
margin:0;
padding:0;
background:#333;
color:333;
}
#register {
white-space:nowrap;
background:#fff;
padding:1em;
margin:0 auto;
/* outline:1px solid red; /* TEST Outline */
}
.title {
font-size:1.25em;
font-family:Georgia, serif;
text-transform:uppercase;
text-align:left;
padding:0;
margin:0;
}
.fieldwrap {
display:table;
width:100%;
text-align:right;
padding-bottom:.75em;
/* outline:1px dotted blue; /* TEST Outline */
}
.trow {
display:table-row;
/* outline:1px solid lime; /* TEST Outline */
}
.tcell {
display:table-cell;
vertical-align:middle;
padding:.5em 0;
/* outline:1px dotted red; /* TEST Outline */
}
.tcell:first-child {
padding-right:.5em;
width:10%;
}
.tcell:nth-child(2) {
width-:10%;
}
label {
color:333;
font-weight:bold;
font-family:Calibri, sans-serif;
/* outline:1px dotted red; /* TEST Outline */
}
.required:before {
content:"*";
display:inline-block;
vertical-align:middle;
color:#f00;
padding-right:.25em;
}
.checkbx {
text-align:left;
}
input[type="text"] {
border:1px solid #000;
padding:.375em 0;
width:20em;
width:100%;
outline:1px dotted red; /* TEST Outline */
}
input[type="submit"] {
color:#fff;
background:#000;
font-size:1.15em;
text-transform:uppercase;
padding:.25em 1.5em;
}
.submitbox {
text-align:right;
}
.login .tcell:first-child {
padding-left:1.25em;
}
</style>
</head>
<body>
<form id="register" action="/" method="post">
<p class="title">register with your email</p>
<div class="fieldwrap">
<div class="trow">
<div class="tcell"><label class="required" for="fname">First Name</label></div>
<div class="tcell"><input type="text" id="fname" width="40"></div>
</div>
<div class="trow">
<div class="tcell"><label class="required" for="lname">Last Name</label></div>
<div class="tcell"><input type="text" id="lname"></div>
</div>
<div class="trow">
<div class="tcell"><label class="required" for="emailaddr">Email Address</label></div>
<div class="tcell"><input type="text" id="emailaddr"></div>
</div>
<div class="trow">
<div class="tcell"><label for="signup">Sign Up For Newsletter</label></div>
<div class="tcell checkbx"><input type="checkbox" value="submit" id="signup"></div>
</div>
</div>
<p class="title">login information</p>
<div class="fieldwrap login">
<div class="trow">
<div class="tcell"><label class="required" for="pword">Password</label></div>
<div class="tcell"><input type="text" id="pword"></div>
</div>
<div class="trow">
<div class="tcell"><label class="required" for="pwdconf">Confirm Password</label></div>
<div class="tcell"><input type="text" id="pwdconf"></div>
</div>
</div>
<div class="submitbox"><input type="submit" value="submit"></div>
</form>
</body>
</html>
PaulOB
October 2, 2014, 2:48pm
9
Hi Ron,
That demo suffers from the issue oddz was trying to avoid in that should you add more text to the label in the bottom section then the inputs get smaller but then do not match the top section.
ronpat
October 2, 2014, 3:00pm
10
Yes, that’s true, and that’s what I get for not reading the topic thoroughly. I was focussing on the inputs. OK. Back to the drawing board.
Question:all labels (so also under REGISTER) should also get longer (be as long as the Klingon version of “confirm password”)?
I ask because way back when I worked on a form-heavy multi-lingual site, we had labels who would really really differ in length, and they were at first also right-aligned, but many fieldsets had only short labels and in those, it started to look really dumb. Though, when I say form heavy, I mean like 30 fieldsets full of questions.
PaulOB
October 2, 2014, 3:43pm
12
It can be done with real html tables because you can then have the content all in one table and use colspan for the headings to span the columns. There is no colspan in CSS so you can’t span columns although you can absolutely place content across the column it does not really work as yo lose the flow of the page. You can also use negative margins on the heading but then again its just a guess and won’t work exactly
I think the only way outside of flexbox is to do this in a real table.
Like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#container {
width:80%;
margin:auto;
background:#f9f9f9;
text-align:right;
}
#container,#container * {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
#container td{padding:5px}
#container td + td {width:100%}
label {white-space:nowrap;padding:0 5px;}
input[type=text] {width:100%}
.colspan{text-align:left;background:#eee;padding:10px 5px;}
</style>
</head>
<body>
<table id="container">
<tr>
<td class="colspan" colspan="2">The header that spans both columns goes here</td>
</tr>
<tr>
<td><label for="newsletter-signup">Sign Up For Newsletter longer label</label></td>
<td><input type="text" id="newsletter-signup" name="newsletter_signup"></td>
</tr>
<tr>
<td class="colspan" colspan="2">The header that spans both columns goes here</td>
</tr>
<tr>
<td><label for="pwd-confirm">Confirm Password</label></td>
<td><input type="text" id="pwd-confirm" name="pwd_confirm"></td>
</tr>
</table>
</body>
</html>
ronpat
October 2, 2014, 4:11pm
13
Yes, a real table is a breeze. This is a case where an HTML table would probably be the most practical solution.
I’ve been trying the pos:abs approach. It seems to work and is scalable, but it’s tricky to set the vertical space “just right”. Still working on it.
ronpat
October 2, 2014, 6:19pm
14
This is yet another rework of my mega-div version. It uses {position:absolute} to align the title text to the left edge of the CSS table. Doesn’t matter which tcell holds the text.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!--
http://www.sitepoint.com/community/t/display-table-row-group-not-working/99690
Display: table-row-group not working
oddz
-->
<title>loginForm (css tables)</title>
<style>
html,body {
margin:0;
padding:0;
background:#333;
color:333;
}
#register {
width:80%;
white-space:nowrap;
background:#fff;
padding:1em;
margin:0 auto;
/* outline:1px solid red; /* TEST Outline */
}
.fieldwrap {
display:table;
width:100%;
position:relative;
text-align:right;
padding-bottom:.75em;
/* outline:1px dotted blue; /* TEST Outline */
}
.trow {
display:table-row;
/* outline:1px solid lime; /* TEST Outline */
}
.tcell {
display:table-cell;
vertical-align:middle;
padding:.5em 0;
/* outline:1px dotted blue; /* TEST Outline */
}
.tcell:first-child {
width:10%;
padding-right:.5em;
}
.titler {
height:1.75em;
padding-bottom:1em;
padding-top:0;
}
.title {
position:absolute;
left:0;
font-size:1.25em;
font-family:Georgia, serif;
text-transform:uppercase;
text-align:left;
padding:0;
margin:0;
}
label {
color:333;
font-weight:bold;
font-family:Calibri, sans-serif;
/* outline:1px dotted red; /* TEST Outline */
}
.required:before {
content:"*";
display:inline-block;
vertical-align:middle;
color:#f00;
padding-right:.25em;
}
.checkbx {
text-align:left;
}
input[type="text"] {
border:1px solid #000;
padding:.375em 0;
width:20em;
width:100%;
/* outline:1px dotted red; /* TEST Outline */
}
input[type="submit"] {
color:#fff;
background:#000;
font-size:1.15em;
text-transform:uppercase;
padding:.25em 1.5em;
}
.submitbox {
text-align:right;
}
</style>
</head>
<body>
<form id="register" action="/" method="post">
<div class="fieldwrap">
<div class="trow">
<div class="tcell titler"><p class="title">register with your email</p></div>
<div class="tcell"></div>
</div>
<div class="trow">
<div class="tcell"><label class="required" for="fname">First Name</label></div>
<div class="tcell"><input type="text" id="fname" width="40"></div>
</div>
<div class="trow">
<div class="tcell"><label class="required" for="lname">Last Name</label></div>
<div class="tcell"><input type="text" id="lname"></div>
</div>
<div class="trow">
<div class="tcell"><label class="required" for="emailaddr">Email Address</label></div>
<div class="tcell"><input type="text" id="emailaddr"></div>
</div>
<div class="trow">
<div class="tcell"><label for="signup">Sign Up For Newsletter</label></div>
<div class="tcell checkbx"><input type="checkbox" value="submit" id="signup"></div>
</div>
<div class="trow">
<div class="tcell titler"><p class="title">login information</p></div>
<div class="tcell"></div>
</div>
<div class="trow">
<div class="tcell"><label class="required" for="pword">Password</label></div>
<div class="tcell"><input type="text" id="pword"></div>
</div>
<div class="trow">
<div class="tcell"><label class="required" for="pwdconf">Confirm Password</label></div>
<div class="tcell"><input type="text" id="pwdconf"></div>
</div>
</div>
<div class="submitbox"><input type="submit" value="submit"></div>
</form>
</body>
</html>
1 Like
oddz
October 2, 2014, 8:11pm
15
Nice, even works in IE8. I’ll have to take a look and see what I was doing differently. Then the fun of integrating into Magento begins.
PaulOB
October 2, 2014, 9:07pm
16
Yes that’s the method I mentioned but its not a foolproof method as the text will spill out of the cell if its too long (unlike the table version) but I think that’s as close as you can get and should suit this purpose.
Good work Ron.
1 Like
oddz
October 3, 2014, 12:25pm
17
That shouldn’t be an issue. So for my purposes it should work. Regardless of language those headlines will *probably only ever be a single line long. The container I’m working with is fixed width that snaps to mobile in a specific breakpoint is reached which changes the layout. So none of it should become a problem.
.