Updated styling per review comment

facebook · Oct 25, 2018 · 6f23219 · 6f23219
1 parent e2d4915
commit 6f23219
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/v1/examples/basics/pages/en/users.js b/v1/examples/basics/pages/en/users.js
@@ -22,10 +22,12 @@ class Users extends React.Component {
  const editUrl = `${siteConfig.repoUrl}/edit/master/website/siteConfig.js`;
  const showcase = siteConfig.users.map(user => (
  <div>
- <a href={user.infoLink} key={user.infoLink}>
- <img src={user.image} alt={user.caption} title={user.caption} />
- </a>
- <h4>{user.caption}</h4>
+ <div className="wrapperDiv">
+ <a href={user.infoLink} key={user.infoLink}>
+ <img src={user.image} alt={user.caption} title={user.caption} />
+ </a>
+ </div>
+ <p>{user.caption}</p>
  </div>
  ));
 

diff --git a/v1/lib/static/css/main.css b/v1/lib/static/css/main.css
@@ -2219,15 +2219,24 @@ input::placeholder {
  justify-content: center;
 }
 
-.showcaseSection .logos img {
+.showcaseSection .logos .wrapperDiv {
  height: 128px;
+ width: 128px;
+}
+
+.showcaseSection .logos img {
+ max-height: 128px;
  padding: 20px;
  width: 128px;
 }
 
 @media only screen and (max-width: 735px) {
- .showcaseSection .logos img {
+ .showcaseSection .logos .wrapperDiv {
  height: 64px;
+ width: 64px;
+ }
+ .showcaseSection .logos img {
+ max-height: 64px;
  padding: 20px;
  width: 64px;
  }

diff --git a/v1/website/pages/en/users.js b/v1/website/pages/en/users.js
@@ -16,10 +16,12 @@ class Users extends React.Component {
  renderUser(user) {
  return (
  <div>
- <a href={user.infoLink} key={user.infoLink}>
- <img src={user.image} alt={user.caption} title={user.caption} />
- </a>
- <h4>{user.caption}</h4>
+ <div className="wrapperDiv">
+ <a href={user.infoLink} key={user.infoLink}>
+ <img src={user.image} alt={user.caption} title={user.caption} />
+ </a>
+ </div>
+ <p{user.caption}</p>
  </div>
  );
  }