fix grid column spacing mobile
This commit is contained in:
parent
28fc768228
commit
18db74998d
3 changed files with 18 additions and 10 deletions
|
|
@ -20,8 +20,12 @@
|
||||||
transform: translateY(-1px);
|
transform: translateY(-1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[data-template="home"] .title-wrapper button.open-nav {
|
||||||
|
display: inline-block !important;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 640px) {
|
@media screen and (max-width: 640px) {
|
||||||
.open-nav {
|
#main-footer .open-nav {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -60,10 +64,6 @@
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-template="home"] button.open-nav {
|
|
||||||
display: inline-block !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-nav-wrapper {
|
.open-nav-wrapper {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
border: none;
|
||||||
|
|
|
||||||
|
|
@ -25,6 +25,12 @@ body.full-width #main-content {
|
||||||
margin-left: inherit;
|
margin-left: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 640px) {
|
||||||
|
.grid .column:not(:last-child) {
|
||||||
|
margin-bottom: calc(2 * var(--unit--vertical));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 640px) {
|
@media screen and (min-width: 640px) {
|
||||||
[data-template="grid"] main #main-content {
|
[data-template="grid"] main #main-content {
|
||||||
margin-left: calc(0px - calc(4 * var(--unit--horizontal)));
|
margin-left: calc(0px - calc(4 * var(--unit--horizontal)));
|
||||||
|
|
|
||||||
|
|
@ -127,7 +127,7 @@ function subscribe(event) {
|
||||||
|
|
||||||
const panelNav = document.querySelector(".panel");
|
const panelNav = document.querySelector(".panel");
|
||||||
const navOverlay = document.querySelector("#nav-overlay");
|
const navOverlay = document.querySelector("#nav-overlay");
|
||||||
const openNavBtn = document.querySelector("button.open-nav");
|
const openNavBtns = document.querySelectorAll("button.open-nav");
|
||||||
const closeNavBtn = document.querySelector(".panel-close");
|
const closeNavBtn = document.querySelector(".panel-close");
|
||||||
function closeNav() {
|
function closeNav() {
|
||||||
panelNav.classList.remove("panel--visible");
|
panelNav.classList.remove("panel--visible");
|
||||||
|
|
@ -193,10 +193,12 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
openNavBtn.addEventListener("click", () => {
|
openNavBtns.forEach((openNavBtn) => {
|
||||||
panelNav.classList.add("panel--visible");
|
openNavBtn.addEventListener("click", () => {
|
||||||
navOverlay.classList.add("nav-overlay--visible");
|
panelNav.classList.add("panel--visible");
|
||||||
document.body.classList.add("no-scroll");
|
navOverlay.classList.add("nav-overlay--visible");
|
||||||
|
document.body.classList.add("no-scroll");
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
closeNavBtn.addEventListener("click", () => {
|
closeNavBtn.addEventListener("click", () => {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue