gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(curriculum): Convert blockquote elements to triple backtick syntax for Responsive Web Design (#35993)

Browse Source 
* fix: converted blockquotes to code fences
This commit is contained in:
Randell Dawson
2019-05-14 01:11:58 -07:00
committed by Oliver Eyton-Williams
parent 08c4807b09
commit df8659ab8c
57 changed files with 491 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.english.md
View File

@ -10,7 +10,15 @@ videoUrl: 'https://scrimba.com/p/pzrPu4/cz763UD'
Making images responsive with CSS is actually very simple. Instead of applying an absolute width to an element:
<code>img { width: 720px; }</code>
You can use:
<blockquote>img {<br>&nbsp;&nbsp;max-width: 100%;<br>&nbsp;&nbsp;display: block;<br>&nbsp;&nbsp;height: auto;<br>}</blockquote>
```css
img {
max-width: 100%;
display: block;
height: auto;
}
```
The <code>max-width</code> property of 100% scales the image to fit the width of its container, but the image won't stretch wider than its original width. Setting the <code>display</code> property to block changes the image from an inline element (its default), to a block element on its own line. The <code>height</code> property of auto keeps the original aspect ratio of the image.
</section>

9
curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.english.md
View File

@ -11,7 +11,14 @@ With the increase of internet connected devices, their sizes and specifications
The simplest way to make your images properly appear on High-Resolution Displays, such as the MacBook Pros "retina display" is to define their <code>width</code> and <code>height</code> values as only half of what the original file is.
Here is an example of an image that is only using half of the original height and width:
<blockquote>&lt;style&gt;<br>&nbsp;&nbsp;img { height: 250px; width: 250px; }<br>&lt;/style&gt;<br>&lt;img src=&quot;coolPic500x500&quot; alt=&quot;A most excellent picture&quot;&gt;</blockquote>
```html
<style>
img { height: 250px; width: 250px; }
</style>
<img src="coolPic500x500" alt="A most excellent picture">
```
</section>
## Instructions