In order to have a fully responsive web page you need three things: Fluid Layout: the width of the layout is set in fluid units like percent or fr units. This allows the layout to expand and contract to fit the width of the browser window. Flexible Media: images, video etc can also adjust their width… Continue reading Media Queries
Category: Layout
CSS Grid
CSS Grid is relatively simple to get started but it is also deep with a lot to learn. This page has resources about CSS Grid for those just getting started to exploring more complex layouts. Getting Started Guides These guides are designed to help you learn Grid. They all teach the basic ideas but with… Continue reading CSS Grid
Responsive Images and Video
Images are by default inline elements that are a certain size and will take up that space on your web site. For responsive web design we need our images to be able to shrink in size if the container they are in is smaller than the image. For example: The following needs to be in… Continue reading Responsive Images and Video
One-Line Layouts
10 modern layouts in 1 line of CSS by Una Kravets In this article and related resources Una shows how to create modern layouts with just a small amount of CSS. The layouts mostly use CSS Grid and Flexbox. Article (written and video): https://web.dev/one-line-layouts/ Editable Demo Examples on Glitch: https://1linelayouts.glitch.me/ GitHub Repository: https://github.com/una/1linelayouts YouTube Video… Continue reading One-Line Layouts
