ericfawcett
/
route-eight
1
0
Fork 0
Code Issues 3 Pull Requests Releases Wiki Activity

CSS adjustments for scaling

This commit is contained in:
Eric Fawcett 2020-05-13 17:07:45 -04:00
parent a996339fe5
commit 1bc88438aa
1 changed files with 27 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
index.html
View File

@ -16,33 +16,42 @@
margin: 0px auto;
background-color: #444444;
}
.grid-container { /* Default to single column for small screens */
display: grid;
grid-template-columns: auto;
grid-gap: 2px 2px;
}
@media only screen and (min-width: 640px){ /* Two columns for tablets */
.grid-container {
grid-template-columns: auto auto;
}
}
@media only screen and (min-width: 981px){ /* Three columns for large screens */
.grid-container {
grid-template-columns: auto auto auto;
}
}
.grid-item img {
display: inline-block;
width: 100%;
}
.title-wrapper{
text-align: center;
background-color: black;
background-color: #000000;
}
.item-title {
color: white;
font-size: 24px;
color: #ffffff;
font-size: 1.5em;
text-transform: uppercase;
}
.grid-container { /* Default to single column for small screens */
display: grid;
grid-template-columns: auto;
grid-gap: 0.2em 0.2em;
}
@media only screen and (min-width: 40em){ /* screens >640px wide*/
.grid-container {
grid-template-columns: auto auto;
}
}
@media only screen and (min-width: 78.75em){ /* screens >1260px wide */
.grid-container {
grid-template-columns: auto auto auto;
}
.item-title {
font-size: 1.7em;
}
}
@media only screen and (min-width: 118.75em){ /* screens >1900px wide */
.item-title {
font-size: 2.2em;
}
}
</style>
<script>
$(document).ready(function(){