Learning to Code: Day 24 — Responsive Web Design

Creating a Media Query

Make an Image Responsive

img {
max-width: 100%;
height: auto;
}
-FreeCodeCamp
<style>
img { height: 250px; width: 250px; }
</style>
...<img src="coolPic500x500" alt="A most excellent picture">-FreeCodeCamp

Making Responsive Typography

p { width: 50vw; )

Before..
..After

--

--

--

Step by step, learning to code with FreeCodeCamp

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Easily Beat Drawbacks of Wrappers and Inheritance With C# Records

Modern Trends in Testing — Beyond what you’ll learn in ISTQB.

AVAX Portal #2

It’s right there, but I can’t reach it — How Microsoft is solving the problems of business data…

A Concept: Kubernetes based Private Cloud Platform

Building scalable Pipeline with Azure DevOps

Prune Container Images from Rancher using Kubernetes CronJob and Binaries

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hugh Burgess

Hugh Burgess

Step by step, learning to code with FreeCodeCamp

More from Medium

Beyond Burn Out: The Art of Celebrating the Pursuit

Life Purpose and What Mine Is

Journal Entry One