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

Ppt On Scm With Case Study

Learning Docker By Building a Python Application

PHP Central Europe conference 2017

Oriana customer care number 6291890488,,,Oriana customer care number 6291890488,,,Oriana customer…

AWS Case Study : Twitch

How to Reset Samsung Galaxy J2 SM-J200M

Reset Samsung Galaxy

Building a CLI from scratch with Clapv3

Introducing HELLO 2 Creator Edition, HELLO Touch TV, and 2 HELLO Gadgets Extensions

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

What Is Your Passion

Write about something you learned this week.

YumiSwap

What is the Value of a Life