Мобильный добавление пространства между элементами div и перед содержимым ⇐ Html

[Anonymous]

На моем ноутбуке все выглядит нормально во всех браузерах. На мобильных устройствах добавляются дополнительные пробелы в неуместных местах. Это происходит на iPhone. У меня Safari 18.6.2, но все пользователи iPhone тоже его видят.Я пробовал установить размер шрифта на 0. Я пробовал использовать flex. Я попытался добавить отступ 0. У меня уже есть поля и отступы, установленные на 0 в основной части моего сайта. У меня уже есть тег области просмотра. Я уже попробовал все решения, найденные на этом сайте. Я не могу подделать поля, потому что они прозрачны и будут заметно перекрываться.
Я собираюсь включить кодировку для обеих областей, где это происходит. Один использует параллельные элементы div, другой — перед содержимым.
Это изображение.

Код: Выделить всё

[/b] currently online [i][/i] [b][/b] members [b][/b] anons [b][/b] guests[b]

Код: Выделить всё

.custom-stats .stats-wrap { background:linear-gradient(20deg, rgba(var(--mgrgb1),0.5) 0%, rgba(var(--mgrgb2),0.5) 50%, rgba(var(--mgrgb3),0.5) 100%), rgb(var(--pureColor)); box-shadow:0 0 3px rgb(var(--borderColor)); border-radius:10px; overflow:hidden; }

.custom-stats .waves { height:30px; background:rgb(var(--pureColor)); mask:var(--mnWaves); }
.custom-stats .totals { height:30px; background:rgb(var(--pureColor)); display:flex; justify-content:center; align-items:center; }

Это второе изображение.

Код: Выделить всё

[url=index.php?act=Pages&kid=GUIDEBOOK#about]about the site[/url]
[url=index.php?act=Pages&kid=GUIDEBOOK#general]general rules[/url]
[url=index.php?act=Pages&kid=GUIDEBOOK#content]content & restrictions[/url]
[url=index.php?act=Pages&kid=GUIDEBOOK#started]getting started[/url]
[url=index.php?act=Pages&kid=GUIDEBOOK#groups]member groups[/url]
[url=index.php?act=Pages&kid=GUIDEBOOK#coding]coding needs[/url]

Код: Выделить всё

.custom-redirect { margin:0; width:100%; height:100%; background:linear-gradient(20deg, rgb(var(--mgrgb1)) 0%, rgb(var(--mgrgb2)) 50%, rgb(var(--mgrgb3)) 100%); box-shadow:0 0 3px rgb(var(--borderColor)); border-radius:10px; display:flex; align-content:space-between; flex-wrap:wrap; grid-area:1 / 1 / 3 / 2; text-align:center; text-transform:uppercase; font-weight:700; letter-spacing:0.5px; overflow:hidden; }

.custom-redirect .description-area { width:100%; background:rgba(var(--pureColor),0.5); }
.custom-redirect .description-area::before { content:""; margin:-50px 0 0; width:100%; height:50px; background:rgba(var(--pureColor),0.5); mask:var(--smWaves); display:block; }

Мои волновые переменные.

Код: Выделить всё

--mnWaves:radial-gradient(44.72px at 50% 60px, #000 99%, transparent 101%) calc(50% - 40px) 0/80px 100%, radial-gradient(44.72px at 50% -40px, transparent 99%, #000 101%) 50% 20px/80px 100% repeat-x;
--smWaves:radial-gradient(57.88px at 50% 79.5px, #000 99%, transparent 101%) calc(50% - 60px) 0/120px 100%, radial-gradient(57.88px at 50% -49.5px, transparent 99%, #000 101%) 50% 30px/120px 100% repeat-x;

Как вы можете видеть на изображениях, между волнами и контентом есть зеленая линия, которой там быть не должно. Его нет на ноутбуке.
ИЗОБРАЖЕНИЕ ОДИН
ИЗОБРАЖЕНИЕ ВТОРОЕ

Код: Выделить всё

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Josefin+Sans:wght@100..700&family=Lobster&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css');

html, html[color-mode="light"] { --mainFont:'Poppins', sans-serif; --accentFont:'Lobster', sans-serif;
--fontColor:60,60,60; --pureColor:255,255,255; --subColor:248,248,248; --mainColor:242,242,242; --primeColor:235,235,235; --backColor:214,214,214; --borderColor:208,208,208;
--backImg:url(https://files.jcink.net/uploads2/bluehour/skin/god_lightback.png); --forumImg:url(https://placehold.co/1125x465);
--mainPH:url(https://placehold.co/250x450); --avatarPH:url(https://files.jcink.net/uploads2/bluehour/skin/god_avatarPH.gif);
--mnWaves:radial-gradient(44.72px at 50% 60px, #000 99%, transparent 101%) calc(50% - 40px) 0/80px 100%, radial-gradient(44.72px at 50% -40px, transparent 99%, #000 101%) 50% 20px/80px 100% repeat-x;
--smWaves:radial-gradient(57.88px at 50% 79.5px, #000 99%, transparent 101%) calc(50% - 60px) 0/120px 100%, radial-gradient(57.88px at 50% -49.5px, transparent 99%, #000 101%) 50% 30px/120px 100% repeat-x;
--lgWaves:radial-gradient(111.8px at 50% 150px, #000 99%, transparent 101%) calc(50% - 100px) 0/200px 100%, radial-gradient(111.8px at 50% -100px, transparent 99%, #000 101%) 50% 50px/200px 100% repeat-x;
--mgrgb1:65,88,208; --mgrgb2:200,80,192; --mgrgb3:251,189,78;
}

body { margin:0; padding:0; background-image:linear-gradient(200deg, rgba(var(--mgrgb1),0.3) 0%, rgba(var(--mgrgb2),0.3) 50%, rgba(var(--mgrgb3),0.3) 100%), var(--backImg); background-size:cover; background-position:center; background-attachment:fixed; background-repeat:no-repeat; text-align:left; font-family:var(--mainFont); color:rgb(var(--fontColor)); font-size:11px; text-transform:none; line-height:100%; transition:all 0.7s ease-in-out; }

a:link, a:visited, a:active { color:inherit; text-decoration:none; transition:all 0.7s ease-in-out; }
a:hover { color:rgb(var(--borderColor)); text-decoration:none; }

.custom-stats .stats-content { padding:30px; background-color:rgb(var(--mainColor)); border-radius:0 0 10px 10px; text-align:center; text-transform:uppercase; font-weight:700; letter-spacing:0.5px; overflow:hidden; }
.custom-stats .stats-wrap { background:linear-gradient(20deg, rgba(var(--mgrgb1),0.5) 0%, rgba(var(--mgrgb2),0.5) 50%, rgba(var(--mgrgb3),0.5) 100%), rgb(var(--pureColor)); box-shadow:0 0 3px rgb(var(--borderColor)); border-radius:10px; overflow:hidden; }
.custom-stats group { transition:all 0.7s ease-in-out; } .custom-stats a:hover, .custom-stats group:hover { color:rgba(var(--mgrgb2),0.8); }

.custom-stats .top-stats-bar { margin:0 0 20px; display:grid; grid:280px / 50% 60px 1fr; gap:20px; }
.custom-stats .bottom-stats-bar { display:grid; grid:80px / 1fr 130px 410px 440px; gap:20px; }

.custom-stats .online-now-scroll { margin:35px 30px 10px 35px; height:170px; padding:0 5px 0 0; text-align:left; font-size:30px; text-transform:lowercase; font-weight:600; line-height:110%; letter-spacing:0; overflow:auto; }
.custom-stats .online-now group { padding:4px; background:rgba(var(--pureColor),0.6); -webkit-background-clip:text; -webkit-text-stroke:3px transparent; }
.custom-stats .online-today-scroll { margin:5px 25px 15px 30px; height:100px; padding:0 5px 0 0; text-align:justify; line-height:150%; overflow:auto; }
.custom-stats .waves { height:30px; background:rgb(var(--pureColor)); mask:var(--mnWaves); } .custom-stats .online-today .waves { transform:rotate(180deg); }
.custom-stats .totals { height:30px; background:rgb(var(--pureColor)); display:flex; justify-content:center; align-items:center; }
.custom-stats .online-now .totals { padding:0 0 5px; } .custom-stats .online-today .totals { padding:5px 0 0; }
.custom-stats .totals b { margin:0 0 0 6px; color:rgb(var(--mgrgb2)); } .custom-stats .totals i { margin:0 4px 0 10px; font-size:13px; }

.custom-stats .stats-wrap.newest { margin:0 0 15px; height:80px; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.custom-stats .newest a { padding:4px; background:rgba(var(--pureColor),0.6); -webkit-background-clip:text; -webkit-text-stroke:3px transparent; font-size:20px; text-transform:lowercase; font-weight:600; line-height:100%; }
.custom-stats .links-space { display:flex; justify-content:space-between; } .custom-stats .top-stats-bar .links-space { flex-direction:column; }
.custom-stats .links-space a { width:60px; height:60px;  background:linear-gradient(20deg, rgba(var(--mgrgb1),0.5) 0%, rgba(var(--mgrgb2),0.5) 50%, rgba(var(--mgrgb3),0.5) 100%), rgb(var(--pureColor)); box-shadow:0 0 3px rgb(var(--borderColor)); border-radius:5px; display:flex; justify-content:center; align-items:center; text-align:center; overflow:hidden; }
.custom-stats .links-space i { padding:4px; background:rgba(var(--pureColor),0.6); -webkit-background-clip:text; -webkit-text-stroke:3px transparent; font-size:26px; }

.custom-stats .space-gif { height:60px; padding:10px; background:linear-gradient(20deg, rgba(var(--mgrgb1),0.5) 0%, rgba(var(--mgrgb2),0.5) 50%, rgba(var(--mgrgb3),0.5) 100%), rgb(var(--pureColor)); box-shadow:0 0 3px rgb(var(--borderColor)); border-radius:5px; overflow:hidden; }
.custom-stats .space-gif pic { height:60px; background:var(--avatarPH) center center/cover; border-radius:5px; display:block; }
.custom-stats .bottom-stats-bar .links-space { position:relative; } .custom-stats .bottom-stats-bar .links-space::after { content:""; width:130px; height:10px; background:linear-gradient(200deg, rgba(var(--mgrgb1),0.5) 0%, rgba(var(--mgrgb2),0.5) 50%, rgba(var(--mgrgb3),0.5) 100%), rgb(var(--pureColor)); box-shadow:0 0 3px rgb(var(--borderColor)); border-radius:5px; position:absolute; bottom:0; left:0; }
.custom-stats .stats-wrap.bhstats { height:80px; padding:0 30px; display:flex; justify-content:center; align-items:center; text-align:justify; line-height:120%; }
.custom-stats .bhstats u { font-size:13px; text-decoration-style:dotted; }

.custom-stats .admin-spots { display:flex; gap:10px; }
.custom-stats .admin-spots intro { width:80px; height:80px; display:flex; justify-content:left; align-items:center; position:relative; }
.custom-stats .admin-spots intro i { padding:4px; background:linear-gradient(200deg, rgba(var(--mgrgb1),0.5) 0%, rgba(var(--mgrgb2),0.5) 50%, rgba(var(--mgrgb3),0.5) 100%), rgb(var(--pureColor)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-size:50px; }
.custom-stats .admin-spots team { position:absolute; top:20px; left:20px; }
.custom-stats .admin-spots a { width:60px; height:60px; padding:10px; background:linear-gradient(20deg, rgba(var(--mgrgb1),0.5) 0%, rgba(var(--mgrgb2),0.5) 50%, rgba(var(--mgrgb3),0.5) 100%), rgb(var(--pureColor)); box-shadow:0 0 3px rgb(var(--borderColor)); border-radius:5px; overflow:hidden; }
.custom-stats .admin-spots pic { width:60px; height:60px; background-size:cover; background-position:center; border-radius:5px; display:block; }

Код: Выделить всё

        








[/b] currently online [i][/i] [b][/b] members [b][/b] anons [b][/b] guests[b]

[url=index.php?act=Online&CODE=listall&sort_key=click][i][/i][/url]
[url=index.php?act=Online&CODE=listall&sort_key=name&sort_order=asc&show_mem=reg][i][/i][/url]
[url=index.php?act=Search&CODE=getactive][i][/i][/url]
[url=index.php?act=Search][i][/i][/url]

our newest stargazer is 

[/b]  members online today









[url=https://discord.gg/bluehoursandbox][i][/i][/url]
[url=index.php?act=Members&max_results=500][i][/i][/url]

[u]Blue Hour[/u] was established in [u]October 2022[/u]. We are home to [u][/u] registered Stargazers and there are currently [u][/u] posts on this board.

[i][/i]admin team
[url=index.php?showuser=4][/url]
[url=index.php?showuser=5][/url]
[url=index.php?showuser=6][/url]
[url=index.php?showuser=4][/url]

Подробнее здесь: https://stackoverflow.com/questions/798 ... re-content