Category Archives: Responsive

Responsive images with srcset and sizes attributes vs picture element – Learnedia

Good tutorial with examples.   srcset syntax So how to properly use srcset and sizes attributes? This is the code I used for displaying Example 1 Hero images on the sample page: <img src=”hero-big.jpg” srcset=”hero-small.jpg 450w, hero-medium.jpg 960w, hero-big.jpg 1500w” sizes=”(max-width: 552px) 450px, (max-width: 1062px) 960px, 1500px” alt=”Learnedia Hero” /> The first line is pretty […]

Recreating the Google Images Search Layout with CSS — SitePoint

Great tutorial from SitePoint explaining how to create a dynamic Google Images style User Interface. See the Pen Google Images search in CSS by Steven Collins (@stelco74) on CodePen. Edit: Better version which allows inline content (html) and has a built in carousel to navigate through the cards whilst in expanded mode 🙂 https://github.com/oriongunning/gridder Demo: […]

Precise control over responsive typography · MadebyMike

I found this the most effective way to make type responsive in modern browsers.  This useful article explains all. :root{ font-size: calc(16px + 3vw); } Source: Precise control over responsive typography · MadebyMike

Everything I know about Responsive Web Typography | Zell Liew

Responsive typography is a tough nut to crack. This was the best meth Source: Everything I know about Responsive Web Typography | Zell Liew

Lity – Lightweight, accessible and responsive lightbox

Lity is a ultra-lightweight, accessible and responsive lightbox plugin which supports images, iframes and inline content out of the box. Source: Lity – Lightweight, accessible and responsive lightbox