Switch to narrow view below width of 700px on web client

This makes the dropdown menu align better to the profile picture in
mobile view
This commit is contained in:
Debanjum Singh Solanky 2023-11-01 16:39:11 -07:00
parent 6a0adfbfbb
commit 022d695309
5 changed files with 11 additions and 11 deletions

View file

@ -183,7 +183,7 @@ p#khoj-banner {
}
}
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 700px) {
div.khoj-header {
display: grid;
grid-auto-flow: column;

View file

@ -234,12 +234,12 @@
height: 32px;
}
@media screen and (max-width: 600px) {
@media screen and (max-width: 700px) {
.section-cards {
grid-template-columns: 1fr;
}
}
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 700px) {
body {
display: grid;
grid-template-columns: 1fr;

View file

@ -465,7 +465,7 @@
padding: 2px 4px;
}
}
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 700px) {
body {
grid-template-columns: 1fr;
grid-template-rows: auto auto minmax(80px, 100%) auto;
@ -485,7 +485,7 @@
padding: 0;
}
}
@media only screen and (min-width: 600px) {
@media only screen and (min-width: 700px) {
body {
grid-template-columns: auto min(70vw, 100%) auto;
grid-template-rows: auto auto minmax(80px, 100%) auto;

View file

@ -300,7 +300,7 @@
</body>
<style>
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 700px) {
body {
display: grid;
grid-template-columns: 1fr;
@ -311,7 +311,7 @@
grid-column: 1;
}
}
@media only screen and (min-width: 600px) {
@media only screen and (min-width: 700px) {
body {
display: grid;
grid-template-columns: 1fr min(70vw, 100%) 1fr;
@ -495,7 +495,7 @@
box-shadow: 0 0 11px #aaa;
}
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 700px) {
a.khoj-banner {
display: block;
}

View file

@ -58,7 +58,7 @@
</body>
<style>
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 700px) {
body {
display: grid;
grid-template-columns: 1fr;
@ -69,7 +69,7 @@
grid-column: 1;
}
}
@media only screen and (min-width: 600px) {
@media only screen and (min-width: 700px) {
body {
display: grid;
grid-template-columns: 1fr min(70vw, 100%) 1fr;
@ -150,7 +150,7 @@
font-size: x-large;
}
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 700px) {
a.khoj-banner {
display: block;
}