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; margin: 0px auto;
background-color: #444444; 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 { .grid-item img {
display: inline-block;
width: 100%; width: 100%;
} }
.title-wrapper{ .title-wrapper{
text-align: center; text-align: center;
background-color: black; background-color: #000000;
} }
.item-title { .item-title {
color: white; color: #ffffff;
font-size: 24px; font-size: 1.5em;
text-transform: uppercase; 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> </style>
<script> <script>
$(document).ready(function(){ $(document).ready(function(){