Responsive Image Columns
Activity
Here you can test out what you read, and achieve badges.
Activity Instructions
Match the image by doing the following:
- Put these figures into three equal responsive columns (see https://www.understandingcode.com/responsive-columns/)
- The images should resize as you resize the browser window (see https://www.understandingcode.com/widths/)
- TIP: Figures have default margins that need to be overwritten
HTML
1
<figure>2
<img src="https://www.understandingcode.com/wp-content/uploads/2016/06/pollen.jpg">
3
<figcaption>
4
Pollen5
</figcaption>
6
</figure>7
<figure>8
<img src="https://www.understandingcode.com/wp-content/uploads/2016/06/hive.jpg">
9
<figcaption>
10
The Hive11
</figcaption>
12
</figure>13
<figure>14
<img src="https://www.understandingcode.com/wp-content/uploads/2016/06/foraging.jpg">
15
<figcaption>
16
Bee Foraging17
</figcaption>
18
</figure>CSS
1
JavaScript
1
</script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><script>