我的網站在右側顯示空白，僅在移動設備上
[英]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.