Need some help with some fancy formatting for a responsive design.
When a display is greater than 53em, I need the following li to insert a carriage return/blank line (i.e. head1) so that I get the effect of this item being bottom-aligned relative to other li’s that have a two work heading.
However, when the display is less than 53em, I want the carriage return/blank line to disappear so that things are on one line.
I thought the nbsp would do the job, but it is adding in an annoying space when things are under 53em as shown in the second screenshot.
It would be easy to use PHP to dynamically set the HTML, but I am trying to write the HTML once, and then get my media queries and CSS to do what I want.
If the layout is using display: table then you could have the headers on one row and the text in another. The rows could have a class/id to set the alignment and styling as you like.
Hi mikey_w, I guess it is the 5 nav squares from your other thread with, and that it is the example Ronpat gave that you’re working with.
Just trying to show that it can be done. Not thoroughly tested.
I have edit the code from Ronpat’s post #30 in Unordered List as boxes? to add the visual effect I think you are trying to achive now. Tried to make it without changing too much of what you already have. Hopefully somebody else can step in with different examples.
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>5 Fixed Boxes Nav</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style type="text/css">
.outermost{
margin:0 auto;
width:52em;
}
.outerwrap{
position:relative;
padding-top:20%;
}
.wrapper{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
nav{
display:table;
table-layout:fixed;
border-collapse:collapse;
width:100%;
height:100%;
background-color:#bdf;
}
a{
display:table-cell;
border:1px solid #854;
padding:.5em;
color:inherit;
vertical-align:top;
text-align:justify;
font:.9em/1.2 arial,sans-serif;
text-decoration:none;
}
a:hover span{
color:blue;
text-decoration:underline;
}
span{
display:table-cell;
width:1%; /* use available space */
height:2.4em;
vertical-align:bottom;
text-align:center;
font-weight:bold;
font-size:1.2em;
}
@media screen and (max-width:53em){
nav, a, span{ display:block; width:auto; height:auto; text-align:left}
a+a{ border-top:0}
}
</style>
</head><body>
<div class="outermost">
<div class="outerwrap">
<div class="wrapper">
<nav>
<a href="#go1"><span>Responsive Design</span>Lorem imsum. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.</a>
<a href="#go2"><span>Mobile</span>Lorem imsum dolor sit amet, maximus mollis erat.</a>
<a href="#go3"><span>SEO</span>Lorem imsum dolor sit amet, consectetur elit dipiscing. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.</a>
<a href="#go4"><span>Programming</span>Lorem imsum. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.</a>
<a href="#go5"><span>Business Development</span>Lorem imsum. Donec lictus nulla, celerisque id augue in, maximus mollis erat.</a>
</nav>
</div>
</div>
</div>
</body></html>
Correct. (I loved Paul O’s solution, but I felt this current design would be a better place to start as far as being responsive.)
Thanks for the effort!
Could you help me understand what you are doing here better…
span{
display:table-cell;
width:1%; /* use available space */
height:2.4em;
vertical-align:bottom;
text-align:center;
font-weight:bold;
font-size:1.2em;
}
If you have a{ display: table-cell}, then why must you redefine it here: span{ display: table-cell}?
I don’t understand what you are doing with width
I’m not seeing how you are forcing headings like “Responsive Design” to break between two words and be on two lines
Is height: 2.4em scalable/responsive?
You styling for the media query seems inconsistent. In this style…
It only wraps when the line is too short for the text.
The height’s em unit scales with the font-size.
It’s a habit to save code. Those selectors should all have those declarations and to give some what they already had made no difference to them.
See 5.
It’s the adjacent selector, all "a"s that comes after an adjacent “a” is selected. It removes the top border, because in block display only the first anchor should have a top border. In table display their table-cell borders was collapsed, but not as blocks.
What benefit does that serve? Seems like overkill.
Again, there seems like an easier way.
Short of using PHP to dynamically define my HTML, is there a way to define where headings break?
In my example it is easy… I want a carriage return between words (e.g. Web Development) when I am using the “box” layout, and for the mobile layout I want it all on one line.
