improve mobile styling

This commit is contained in:
Aljaz S
2021-11-23 18:57:20 +01:00
parent ed1676bac1
commit ac04841b01
2 changed files with 10 additions and 9 deletions

View File

@@ -14,7 +14,7 @@ div {
}
.title {
display: grid;
grid-template-columns: auto auto 1fr;
grid-template-columns: auto max-content;
align-content: center;
justify-content: center;
padding: 1rem;
@@ -35,15 +35,16 @@ div {
background-position: center center;
background-repeat: no-repeat;
background-image: url("/public/invalid-content.png");
margin: 2rem;
min-height: 210px;
min-width: 210px;
}
.card {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-template-rows: auto auto;
@media screen and (min-width: 700px) {
.card {
grid-template-columns: min-content 1fr;
column-gap: 1rem;
}
.title { grid-column: span 2; }
}
.title { grid-row: 1; grid-column: 1 / -1; }
.code { grid-row: 2; grid-column: 1; }
.form { grid-row: 2; grid-column: 2 / -1; }
</style>
<body>
<div class="card">