Permalink
Browse files

Step 5: Add styling

  • Loading branch information...
samanthamichele7 committed May 31, 2017
1 parent 8039092 commit d52523048fcc9986d88914b84e381df82b947e29
Showing with 75 additions and 3 deletions.
  1. +2 −2 src/components/GifItem.js
  2. +1 −1 src/components/GifList.js
  3. +1 −0 src/index.js
  4. +71 −0 src/styles/app.css
@@ -2,9 +2,9 @@ import React from 'react';

const GifItem = (image) => {
return (
<li>
<div className="gif-item">
<img src={image.gif.images.downsized.url} alt="" />
</li>
</div>
)
};

@@ -7,7 +7,7 @@ const GifList = (props) => {
});

return (
<ul>{gifItems}</ul>
<div className="gif-list">{gifItems}</div>
);
};

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
import GifList from './components/GifList';
import SearchBar from './components/SearchBar';
import request from 'superagent';
import './styles/app.css';

class App extends React.Component {
constructor() {
@@ -0,0 +1,71 @@
.app {
margin: 3em auto;
width: 90%;
}

.gif-item {
box-shadow: 2px 2px 4px 0 #ccc;
box-sizing: border-box;
display: inline-block;
margin: 0 0 1.5em;
padding: 1em;
width: 100%;
}

.gif-item img {
width: 100%;
}

.gif-list {
column-gap: 1.5em;
font-size: .85em;
margin: 1.5em 0;
padding: 0;
}

input {
display: block;
font-size: 22px;
height: 50px;
margin: 0 auto;
text-align: center;
width: 50%;
}

@media only screen and (min-width: 400px) {
.gif-list {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}

@media only screen and (min-width: 700px) {
.gif-list {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}

@media only screen and (min-width: 900px) {
.gif-list {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}

@media only screen and (min-width: 1100px) {
.gif-list {
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
}
}

@media only screen and (min-width: 1280px) {
.app {
width: 1140px;
}
}

0 comments on commit d525230

Please sign in to comment.