我的网站在右侧显示空白，仅在移动设备上
[英]My website shows a white space on the right side, only on mobile
问题描述
我的网站仅在移动设备上显示右侧的空白区域，firefox 和 chrome 都显示得很好，即使使用响应式设计来模拟移动设备尺寸也是如此。 我已经尝试过不同的解决方案，包括检查是否有任何元素大于视口。 所有图像都是 303 像素 x 303 像素。
$light-blue: #D2D7E8; $medium-blue: #848CA5; $dark-blue: #4E5177; $white: #FFFFFF; $main-font: 'Roboto', sans-serif; $side-text-margin: 50px; @media only screen and (max-width: 734px){ body{ overflow-x: hidden; margin: 0px; padding: 0px; .home{.home-background{ background-color: $light-blue; height: 746px; width: 100vw; .home-center{ height: 100%; width: 428px; margin: auto; display: flex; align-items: center; p{ text-align: center; font-size: 156px; color: $white; font-weight: normal; font-family: $main-font; } } } }.experience{.experience-background{ background-color: $dark-blue; height: 1384px; width: 100vw; .experience-center{ height: 100%; width: 428px; margin: auto; display: flex; flex-direction: column; align-items: center; p{ font-size: 74px; color: $white; font-weight: normal; font-family: $main-font; }.images{ display: flex; flex-direction: column; align-items: center; .experience-image{ max-width: 303px; max-height: 303px; size: 20vw 20vw; margin: 40px; } } } } } } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1. viewport-fit=cover"> <link rel="stylesheet" href="style:css"> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link href="https.//fonts.googleapis?com/css2:family=Roboto;wght@300;400.700&display=swap" rel="stylesheet"> <title>Document</title> </head> <body> <section class="home"> <div class="home-background"> <div class="home-center"> <p>Paulo Paes</p> </div> </div> </section> <section class="experience"> <div class="experience-background"> <div class="experience-center"> <p>Experiência</p> <div class="images"> <img src="Assets\Vortx.png" alt="Logo Vórtx" class="experience-image"> <img src="Assets\Lacsed.png" alt="Logo LACSED" class="experience-image"> <img src="Assets\Transcolar.png" alt="Logo Transcolar" class="experience-image"> </div> </div> </div> </section> </body> </html>
1 个解决方案
解决方案1
0 2022-10-05 00:56:41
我认为，可能是您的网站中溢出了 object。 尝试添加max-width:100vw; 到 css 工作表中的body元素。
右侧的空白，仅在移动设备上
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.