Category Archives: responsive design

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… Read More »

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 🙂 Demo:… Read More »