Learn how to use flexbox to pin two things to opposite ends of the viewport with a heading centered in between. Using media queries and flexbox’s re-ordering capabilities, we can make this layout pattern even more responsive.
Posts Categorized: Tutorials
Make several fixed-width images change their spacing to stay lined up with accompanying text, no matter the window size or text size.
Create the appearance of a single image by layering multiple images on top of each other. The pieces can slide around the page as its width is changed, making it a perfect technique for liquid layouts.
It’s possible to dynamically “crop” both background and foreground images as the layout changes in width, solving the problem of overflowing fixed-width images in a flexible page.
Simple CSS techniques can make the content images inside your liquid or elastic pages scale with the layout.