2

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

Community
  • 1
  • 1
Adam Pohl
  • 37
  • 5

1 Answers1

1

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%;
 }
}
Lewis
  • 3,479
  • 25
  • 40
  • Thanks for your help, the white has reduced considerably, I have moved some things around and it now lookslike this: here Any ideas on how to get rid of it? thanks. – Adam Pohl Mar 11 '16 at 16:54
  • @AdamPohl Can you post that image in your original question? Images won't display in comments, and that link produces file not found as it's google account protected. – Lewis Mar 11 '16 at 16:56
  • There you go, click on the `current state of whitespace` link. – Adam Pohl Mar 11 '16 at 16:59
  • Ah, okay, not much I can do from that image. Have you got an updated link to the code? – Lewis Mar 11 '16 at 16:59
  • Here is a link to my fork of the repo, have a look at the last commit to see what I have done. https://github.com/Huaraz2/Moduleplanner.github.io/tree/mod-code – Adam Pohl Mar 11 '16 at 17:06
  • Sorry, I meant a currently running live version of the code so I can view the page in a browser. I've scanned your git and nothing sticks out. – Lewis Mar 11 '16 at 17:14
  • The issue is now with `div.degree div.course`, you have a width set to 350px. Change this to max-width:100% in the media query and `width: auto;`, you should be golden. See my updated answer. – Lewis Mar 11 '16 at 17:30