fix downside of page ios

This commit is contained in:
2026-05-16 18:54:50 +03:00
parent 3298891683
commit 9cac082da1
3 changed files with 27 additions and 26 deletions

View File

@@ -3,13 +3,14 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<link rel="icon" type="icon" sizes="32x32" href="images/free-icon-wedding-ring-4155044.ico">
<title>Wedding invitation</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
<link rel="preload" href="fonts/yourfont.woff2" as="font" type="font/woff2" crossorigin>
</head>
<body>

View File

@@ -23,29 +23,31 @@
/* --------------------------------MAIN-------------------------------- */
html, body {
height: 100%;
}
body {
margin: 0;
font-family: "MurreyC";
font-size: 16px;
font-weight: 400;
letter-spacing: 3px;
background: url("images/ChatGPT\ Image\ 5\ янв.\ 2026\ г.\,\ 15_49_39.webp") center center / cover no-repeat;
background-attachment: fixed;
font-family: "MurreyC";
font-size: 16px;
font-weight: 400;
letter-spacing: 3px;
}
.bg {
position: fixed;
inset: 0;
background: url("images/ChatGPT\ Image\ 5\ янв.\ 2026\ г.\,\ 15_49_39.webp") center center / cover no-repeat;
background-attachment: fixed;
z-index: -1;
position: fixed;
top: -100px;
left: 0;
right: 0;
bottom: -100px;
background: url("images/ChatGPT Image 5 янв. 2026 г., 15_49_39.webp") center center / cover no-repeat;
z-index: -1;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
.content {
position: relative;
min-height: 100vh;
min-height: 100dvh;
}
button {
background-color: #3a1f09;
@@ -63,21 +65,19 @@ button:hover {
img {
max-width: 100%;
}
.content {
}
/* -------------------------------HEADER------------------------------ */
.header {
width: 100%;
background-color: #663c24;
padding: 20px 180px;
margin-top: 40px;
margin-bottom: 40px;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.nav {
width: 100%;
background-color: #663c24;
padding: 20px 180px;
padding-top: calc(20px + env(safe-area-inset-top));
margin-bottom: 40px;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.menu {
display: flex;
justify-content: center;