Search code examples
htmlssi

Whitespace on webpage using ssi on phones


On my website https://traunviertler-traunwalchen.de/ there´s a big whitespace when displaying it on a mobile device (tested with WindowsPhone 10 and Android). I also tested Firefox and Edge on Windows and Firefox in Linux. In this case there´s no whitespace showing up.
The website is using SSI to include the menu, the header on the top and some of the meta tags. Since using SSI this whitespace showed up.
All html pages are encoded using UTF-8 without BOM.
index.html:

<!DOCTYPE html>
<html lang="de">
    <head>
        <title>D&acute;Traunviertler Traunwalchen</title>
    </head>
    <body>
<!--#include virtual=/includes/body.shtml -->
        <main>
            <h1>A herzlichs Gria&szlig; God</h1>
            <figure id=logo>
                <img alt="Das GTEV Traunwalchen-Zeichen" src="/images/Design/logo400x343.png" />
                <figcaption>As GTEV D&acute;Traunviertler Traunwalchen Zoacha</figcaption>
            </figure>
...
        </main>
    </body>
</html>

body.shtml:

    <noscript>Um den vollen Funktionsumfang dieser Webseite zu erfahren, benötigen Sie JavaScript. Eine Anleitung wie Sie JavaScript in Ihrem Browser einschalten, befindet sich <a href="http://www.enable-javascript.com/de/" target="_blank">hier</a>.</noscript>
    <img src="https://www.browser-statistik.de/browser.png?style=0" alt="" />
    <script> 
        var $buoop = {vs:{i:13,f:-2,o:-2,s:9,c:-2},unsecure:true,api:4}; 
        function $buo_f(){ 
            var e = document.createElement("script"); 
            e.src = "//browser-update.org/update.min.js"; 
            document.body.appendChild(e);
        };
        try {document.addEventListener("DOMContentLoaded", $buo_f,false)}
        catch(e){window.attachEvent("onload", $buo_f)}
    </script>

Solution

  • There is an image

    https://www.browser-statistik.de/browser.png?style=0

    after the noscript tag, and your images are width 100% on mobile which causes the issue. You can actually inspect it with chrome, just simulate

    If you can control that image, then add a class to it and style it differently or you can also target it like

    noscript + img {
        width: auto;
    }