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> <head>
<meta charset="UTF-8"> <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"> <link rel="icon" type="icon" sizes="32x32" href="images/free-icon-wedding-ring-4155044.ico">
<title>Wedding invitation</title> <title>Wedding invitation</title>
<link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.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> <link rel="preload" href="fonts/yourfont.woff2" as="font" type="font/woff2" crossorigin>
</head> </head>
<body> <body>

View File

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