My website shows a white space on the right side, only on mobile
Question
My website shows a white space on the right side only on mobile, both firefox and chrome show it just fine, even when using responsive design to simulate mobile size. I've already tried different solutions, including checking if any of the elements are bigger than the viewport. All the images are 303px by 303px.
$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 answers
solution1
0 2022-10-05 00:56:41
I think, it could be, that there is an overflowing object in your website. Try to add max-width:100vw; to the body element in your css sheet.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
white space on the right side, only on mobile
Why is there a white space on the right side of my website?
Website shows white space on mobile
How to remove Extra white space on right side of website in mobile view
Why There is A White space on right side of website in Mobile devices
White Space on Right Side of site. only on chrome mobile
Website shows white space on the right part of page
White space on right side of mobile site
Unwanted white space on right side in mobile view
White space on the right side from mobile
Related Tags