'Unwanted white space in webpage when the screen size is small?

enter image description here

.main {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  height: 100vh;
  min-width: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow: hidden;
}

css^ for main which is the outermost div in my webpage. For some reason when I try and minimize the screen to a phone's size the white space . Is their something I can do in CSS to remove it or is cause of my background styling?

htmlcssreactjsnext.js


Solution 1:[1]

Without looking at some more code it is difficult to guess but here are some solutions to try if you haven't already:

  1. Set border-sizing: border-box; in the CSS.
  2. Make the page responsive: <meta name="viewport" content="width=device-width, initial-scale=1.0"> add this meta tag in the head.
  3. Check if a child element is overflowing from another parent element (other than the .main child elements, if any).
  4. Make use of the browser dev tools to precisely check how and when this extra space appears. Try testing on a smaller device directly, test on different browsers.

These are some ideas, but if you can provide some more code context, that would help.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Aamir

Related Questions