status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added media queries for .showcase in docs, creating a single-column layout on small screens and a two-column layout on tablet-sized screens when viewing showcase of RN apps.

This commit is contained in:
Sean McCambridge 2015-11-03 15:55:14 -05:00
parent 31565781f2
commit c7b46a13f9
1 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
website/src/react-native/css/react-native.css
View File

@ -1091,13 +1091,28 @@ div[data-twttr-id] iframe {
.showcase { .showcase {
margin: 30px auto; margin: 30px auto;
width: 25%; width: 100%;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
vertical-align: top; vertical-align: top;
transition: 0.2s opacity ease-in; transition: 0.2s opacity ease-in;
} }
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
.showcase {
width: 50%;
}
}
@media only screen
and (min-device-width: 1024px) {
.showcase {
width: 25%;
}
}
.showcase:hover { .showcase:hover {
text-decoration: none; text-decoration: none;
opacity: 0.8; opacity: 0.8;
@ -1124,7 +1139,8 @@ div[data-twttr-id] iframe {
border-radius: 20px; border-radius: 20px;
} }
@media only screen and (max-device-width : 1024px) { @media only screen
and (max-device-width: 1024px) {
#content { #content {
display: inline; display: inline;
} }