Commit 608b00d1 authored by Laura Kalbag's avatar Laura Kalbag

Unbreak the latest blog post layout by undoing my daft inline CSS on image widths

parent 82f4737e
......@@ -28,11 +28,11 @@
}
img.small {
max-width: 320px;
width: 320px;
}
img.middling {
max-width: 500px;
width: 500px;
}
</style>
</head>
......@@ -133,7 +133,7 @@
<p>Modernizr can generate a production-ready (small and quick) script that only detects flexbox and flexwrap support. <em class='quiet'>(The <a href='https://ind.ie'>Ind.ie site</a> already uses Modernizr flexbox detection, along with detection for SVG, CSS Shapes, and CSS columns.)</em></p>
<img src='images/modernizr.jpg' alt='Downloading the custom build of Modernizr including flexbox and flexwrap' class='image-centre' style='max-width:657px'/>
<img src='images/modernizr.jpg' alt='Downloading the custom build of Modernizr including flexbox and flexwrap' class='image-centre' style='width:657px'/>
<p>Modernizr detects feature support, then adds the supported features as body class names. This makes it easy to progressively enhance CSS as I can add fancy new CSS based on these body classes.</p>
......@@ -283,7 +283,7 @@
</code></pre>
<figure>
<img src='images/tiny-to-middling.jpg' alt='video controls in both narrow and more middling viewports' class='image-centre' style='max-width:474px'/>
<img src='images/tiny-to-middling.jpg' alt='video controls in both narrow and more middling viewports' class='image-centre' style='width:474px'/>
<figcaption>The time is in the right place on narrower viewports, but when the viewport gets wider, the other items jump up to the first row, as they all fit alongside each other.</figcaption>
</figure>
......@@ -296,7 +296,7 @@
}</code></pre>
<figure>
<img src='images/not-wide-enough.jpg' alt='video controls in three sizes with the playback buttons in the wrong place on the widest view' class='image-centre' style='max-width:596px'/>
<img src='images/not-wide-enough.jpg' alt='video controls in three sizes with the playback buttons in the wrong place on the widest view' class='image-centre' style='width:596px'/>
<figcaption>The flex is perfect on narrower and middling viewports, but when the viewport gets to ~590px, the playback buttons jump up because the remaining 25% of a wider viewport is a bigger space. Setting a media query here will fix the problem:</figcaption>
</figure>
......@@ -314,12 +314,12 @@
</code></pre>
<figure>
<img src='images/top-row-done.jpg' alt='video controls on top row showing progress bar and time flexing to take up correct space' class='image-centre' style='max-width:644px'/>
<img src='images/top-row-done.jpg' alt='video controls on top row showing progress bar and time flexing to take up correct space' class='image-centre' style='width:644px'/>
<figcaption>Now the top row looks perfect.</figcaption>
</figure>
<figure>
<img src='images/long-video.jpg' alt='video controls with time showing 14500:20:34' class='image-centre' style='max-width:464px'/>
<img src='images/long-video.jpg' alt='video controls with time showing 14500:20:34' class='image-centre' style='width:464px'/>
<figcaption>Now there could be a video that’s thousands of hours long, and the layout would still flex to accommodate the numbers.</figcaption>
</figure>
......@@ -333,13 +333,13 @@
}
</code></pre>
<img src='images/playback-flex-grow.jpg' alt='video controls with playback buttons filling space to push volume controls to far right' class='image-centre' style='max-width:560px'/>
<img src='images/playback-flex-grow.jpg' alt='video controls with playback buttons filling space to push volume controls to far right' class='image-centre' style='width:560px'/>
<h3>Flexboxception</h3>
<p>The only layout issue that remains is centring the playback buttons on wider viewports. Ideally play/pause is exactly centre so it’s easier to hit. Here’s where flexbox can be used inside flexbox.</p>
<img src='images/big-playback-not-centre.jpg' alt='video controls with bigger sized playback buttons stuck on left' class='image-centre' style='max-width:649px'/>
<img src='images/big-playback-not-centre.jpg' alt='video controls with bigger sized playback buttons stuck on left' class='image-centre' style='width:649px'/>
<p>First the playback buttons container needs to be made into a flex container:</p>
......@@ -368,7 +368,7 @@
</code></pre>
<figure>
<img src='images/big-playback-centre-offset.jpg' alt='video controls with bigger sized playback buttons centred to their container but not to the width of the player' class='image-centre' style='max-width:639px'/>
<img src='images/big-playback-centre-offset.jpg' alt='video controls with bigger sized playback buttons centred to their container but not to the width of the player' class='image-centre' style='width:639px'/>
<figcaption>Boom! As easy as that… Although the playback buttons are now centred, but to the container and not the player itself.</figcaption>
</figure>
......@@ -389,7 +389,7 @@
</code></pre>
<figure>
<img src='images/big-playback-offset-centre.jpg' alt='video controls with bigger sized playback buttons centred to the width of the player' class='image-centre' style='max-width:620px'/>
<img src='images/big-playback-offset-centre.jpg' alt='video controls with bigger sized playback buttons centred to the width of the player' class='image-centre' style='width:620px'/>
<figcaption>And it’s pretty much done.</figcaption>
</figure>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment