CODEWITHSUNDEEP
htmlcss
Adam Pohl
Adam Pohl

Reputation: 37

Random white space at bottom of page but only on mobile

Hi I have looked at several stackoverflow questions on how to remove white space from a webpage (see selection below) but noone of the solutions given had any difference for me. The werid thing is that the whitespace only shows up when I look at my site on my mobile. The site in question is: http://moduleplanner.github.io/ and its corresponding github repo is: https://github.com/Moduleplanner/Moduleplanner.github.io

Thanks for the help. :)

Huge White Space At Bottom Of Page

Eliminating white space at bottom of page

CSS White Space At Bottom of Page

Strange space at bottom of page on iOS

current state of whitespace

Upvotes: 2

Views: 557

Answers (1)

Someone
Someone

Reputation: 3568

It's your CSS on the .degree element, specifically the absolute positioning. For mobile, change the css to the following;

@media only screen and (max-width: 640px){
 .degree{
   min-width: 100%;
   left: 0;
   right: 0;
 }
}

Or, even better, the following;

@media only screen and (max-width: 640px){
 .degree{
   min-width: 100%;
   position: static;
 }
}

Update

@media only screen and (max-width: 640px){
 .degree{
   min-width: 100%;
   position: static;
 }

 .div.degree div.course{
   width: auto;
   max-width: 100%;
 }
}

Upvotes: 1

Related Questions