White space in the right side using mobile device

So as you might have guessed this is about my newly created first time “responsive” website having a white space to the right. I seem to have fixed this issue when using a bigger screen size but using smaller devices the problem is still very much a thing. I’ve seen many others complaining about this issue and can already now guess that it is because of the mix I’ve used between static elements and divs with a huge overflow plus awkward positioning, it does work however. And using Ghost CSS I see no elements exceeding anything?? Huge confusion from my site. I’d love for you guys to take a look and help me out.
The url is http://loser.space
Many thanks in advance!

Welcome to the forums, @easysidedkbrydskov.

I’m not seeing any white space (Firefox on Android), but I am seeing some shifting and jumping of elements, resulting in temporary overlaps and a generally rather jarring experience.

The white gap is caused because you have a horizontal scrollbar on the window form 1024px downwards. You can see this easily if you just close the window slowly on your desktop browser.

For responsive sites you must never have a scrollbar show on the window because as soon as it shows that will create white-space to the right on mobile because a mobile will need to to make the viewport as wide as the body including its scroll distance. That’s why you get a white gap because the rest of the page is shrunk to make room for the scrolling section at the side which usually means white space showing (because the rest of the page is 100% but the scroll section is greater than 100%).

The scroll on your page is caused by the two images in the middle that have ridiculous margins on each side. One image has 50% and one has 40% which combined with the image size means it can never really fit.

A quick fix is to add this code:

#karate > img{margin-right:0;margin-left:30%}
#computer img{margin-left:0;margin-right:30%}

However, you have other issues with that section in that on larger screens those images overlap badly. Your html for the two images is too convoluted for what should be an easy centering task and needs re-doing properly. It’s too late for me to give a proper fix but I’ll look back tomorrow and see if I can help (unless anyone else wants to jump in meanwhile). :slight_smile:

Ah - now I’ve found the white space. :slight_smile: I had no visible scroll bar, so it didn’t occur to me to scroll horizontally. :blush:

1 Like

Thank you so much for pointing it out. Those two images have been a real killer for me to get centered. Couldn’t figure out how to achieve what I wanted without using margins. I’d love for you to give it a go and clean it up, if possible? Or just point me in the right direction

Post #3 ?

Bearing in mind I’m not sure what end result you were after but I’m assuming the two images were supposed to be in the gray section and not overlapping the gray and the brown then I would do it like this:

I would first put the html for the images into the gray section html and make sure there is no set height on the gray section as you have text that needs to wrap and thus the element needs to grow as required.


 <div id="gray">
      <h3 style="text-align: center; margin: 0; margin-top: 20px;">Fritid</h3>
      <h2 style="text-align: center; margin: 0;">En hverdag med kampsport og computere</h2>
      <div id="karate" class="image-pair item">
        <div class="img1"><img src="https://i.ytimg.com/vi/QJGtCpoBols/maxresdefault.jpg" alt="Colourful bird 1"> </div>
        <div class="img2"><img src="http://28oa9i1t08037ue3m1l0i861.wpengine.netdna-cdn.com/wp-content/uploads/2014/10/prozridiculous-looking-bird-weird-3.jpg"  alt="Colourful bird 2"> </div>
      </div>
    </div>

Then add this css after all your original rules as they over-ride a lot of your existing styles.

#karate img {
	margin:0;
	display:inline;
}
.img1, .img2 {
	display:table-cell;
	text-align:center;
	padding:25px 0;
}
.image-pair {
	position:relative;
	margin:0;
	width:100%;
	display:table;
}
#gray {
	height:auto;
}
@media screen and (max-width:340px) {
	#karate img {
		max-width:140px;
	}
}

That will center the two images horizontally from 320px upwards.

Note that you really should use images of the same aspect ratio rather than forcing them to fit and for small images like these do not start with an image that is 28880 x1800px wide as it weighs in at 720k when it could be about 10k - 20k optimised for that section.

(Note that if you did need the images to poke into the brown section then you could use a negative bottom margin to get the overlap and then pad the top of the brown section.)

Full working page (assuming css file hasn’t changed since last time and bearing in mind I have only addresses the centring of the two images that were discussed).

<!DOCTYPE HTML>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="http://loser.space/stylesheet.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">  </script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">  </script>
<script>
      /* Aktiver scroll animation */
        function scrollToElement (selector) {
          $('html, body').animate({
            scrollTop: $(selector).offset().top
          }, 2000);
        };

        $(document).on('click', 'a.pagejump', function () {
            scrollToElement($(this).attr('href'));
        });

        $(document).ready(function() {

      /* Aktiver navigationsbjælke*/
        $(window).scroll(function () {
            console.log($(window).scrollTop())
          if ($(window).scrollTop() > 910) {
            $('#nav_bar').addClass('navbar-fixed');
          }

        });
      });

    /*Vis navigationsbjælke*/
        $(function(){
        $(window).scroll(function() {
            if ($(this).scrollTop() > 910) {
                $("#nav_bar:hidden").css('visibility','visible');
                $("#nav_bar:hidden").fadeIn('slow');
            }
            else {
                $("#nav_bar:visible").fadeOut("slow");
            }
        });
    });
    $(window).scroll(function(){
  inViewport();
});

$(window).resize(function(){
  inViewport();
});

function inViewport(){
  $('.appear').each(function(){
    var divPos = $(this).offset().top,
            topOfWindow = $(window).scrollTop();

    if( divPos < topOfWindow+500 ){
      $(this).addClass('bounceInRight');
    }
  });
}

</script>
<style>
#karate img {
	margin:0;
	display:inline;
}
.img1, .img2 {
	display:table-cell;
	text-align:center;
	padding:25px 0;
}
.image-pair {
	position:relative;
	margin:0;
	width:100%;
	display:table;
}
#gray {
	height:auto;
}
@media screen and (max-width:340px) {
#karate img {
	max-width:140px
}
}
</style>
</head>
<body>
<header>
  <h1> Steffen Brydskov </h1>
  <h3> Portfolio </h3>
  <a href="#start" class="pagejump"><img src="http://www.pd4pic.com/images/south-arrow-circle-white-shapes-down-direction.png" height="80px" width="80px"></a> </header>
<nav id='nav_bar'>
  <ul class='nav_links'>
    <li><a href="#start">Om</a></li>
    <li><a href="#gray">Fritid</a></li>
    <li><a href="#split">Evner</a></li>
    <li><a href="#skole">Uddannelse</a></li>
    <li><a href="#fremtid">Fremtid</a></li>
    <li style="float: right;"><a href="#download">Download CV</a></li>
    <li style="float: right;"><a href="#footer">Kontakt</a></li>
  </ul>
</nav>
<div id="start">
  <div id="main"> 
    <!-- Om mig -->
    <div id="green" class="appear animated">
      <div style="margin-top: 50px;" class="text"> <img height="200px" width="200px" style="float: right;" src="https://pixabay.com/static/uploads/photo/2014/04/02/10/25/man-303792_960_720.png">
        <h2 style="vertical-align: text-top;">Hvem er jeg?</h2>
        <p style="margin-right: 50%; margin-left: 2%;">Hej, mit navn er Steffen, jeg er 17 år og kommer fra Odense. Jeg er livsglad, og altid frisk på nye udfordringer. </p>
      </div>
    </div>
    <!-- Fritid -->
    <div id="gray">
      <h3 style="text-align: center; margin: 0; margin-top: 20px;">Fritid</h3>
      <h2 style="text-align: center; margin: 0;">En hverdag med kampsport og computere</h2>
      <div id="karate" class="image-pair item">
        <div class="img1"><img src="https://i.ytimg.com/vi/QJGtCpoBols/maxresdefault.jpg" alt="Colourful bird 1"> </div>
        <div class="img2"><img src="http://28oa9i1t08037ue3m1l0i861.wpengine.netdna-cdn.com/wp-content/uploads/2014/10/prozridiculous-looking-bird-weird-3.jpg"  alt="Colourful bird 2"> </div>
      </div>
    </div>
    <div id="red">
      <p>I min fritid dyrker jeg Karate, hvilket byder på mange spændende udfordringer som også resulterer i en kampklar sjæl. <br>
        Derudover har jeg også en stor interesse for gadgets, Android og software. Jeg læser ofte kildekoder igennem fra forskellige open source programmer for at få en bedre forståelse for tingenes sammenhæng. </p>
    </div>
    <div id="split" class="appear animated">
      <div style"display: inline-block" id="x"> <img class="appear2 animated infinite bounce" height="200px" width="200px" style="float: left;" src="https://pixabay.com/static/uploads/photo/2014/04/02/10/25/man-303792_960_720.png">
        <div id="leel" style="float: right; display: inline-block;">
          <h2 style="vertical-align: text-top">Hvad kan jeg?</h2>
          <ul>
            <li>Basic web-udvikling</li>
            <br>
            <li>Være effektiv i mit<br>
              arbejde</li>
            <br>
            <li>Bidgrage med en posit-<br>
              iv stemning</li>
          </ul>
        </div>
      </div>
    </div>
    <!--Udannelse-->
    <div id="cool">
      <div id="skole">
        <div>
          <h2 style="text-align: center;">Uddannelse </h2>
          <ul style="text-align: center;">
            <li>Hjalleseskolen <br>
              0-9 klasse</li>
            <br>
            <li>Højer Efterskole <br>
              10 klasse</li>
            <br>
            <li>Syddansk Erhvervsskole <br>
              IT & Data - Grundforløb 1</li>
          </ul>
        </div>
      </div>
      <!-- Fremtid -->
      <div id="fremtid">
        <div>
          <h2 style="text-align: center;">Fremtid</h2>
          <p style="text-align: center;">Jeg ønsker at færdiggøre min uddannelse som datatekniker, og til det skal jeg bruge en praktikplads. Derefter håber jeg på at kunne tage en bachelor som softwareudvikler da jeg synes det er spændende at kunne omsætte ideer til virkelighed. </p>
        </div>
      </div>
    </div>
    
    <!-- Download sektion -->
    <div id="download">
      <div>
        <div style="text-align: center;">
          <h3 style="text-align: center;">Hent CV klar til udprint</h3>
          <a class="btn" href="cv.docx">Download</a> </div>
      </div>
    </div>
    <!-- Kontakt mig -->
    <div id="kontakt">
      <div id="side">
        <div id="left">
          <p style="font-size: 20px;"><b> Al kontakt er velkommen,<br>
            jeg svarer så hurtigt som muligt</b></p>
        </div>
        <div id="right">
          <h2>Kontakt:</h2>
          <p class="contact">Steffen Bakke Brydskov <br>
            +4560215870 <br>
            easysidedk.brydskov@gmail.com</p>
        </div>
      </div>
    </div>
    
    <!-- Footer -->
    <footer id="footer" class="appear animated">
      <p>Steffen Brydskov</p>
    </footer>
  </div>
</div>
</body>
</html>

Also note that you should never do this:

<h3 style="text-align: center; margin: 0; margin-top: 20px;">Fritid</h3>
      <h2 style="text-align: center; margin: 0;">En hverdag med kampsport og computere</h2>

An h2 will never immediately follow an h3 as that is plainly nonsense and headings must follow in logical order in each section. Don’t use html tags for the way the look as that is CSS’s job. Html defines the structure so use it logically and use the right tag for the job.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.