Ein Problem auf der letzten Seite kann ich im Modifizierten Layout nicht replizieren. Ich kann gerne nochmal den kompletten HTML-Code posten (s. unten) und wenn das nichts hilft, müsste ich Sie bitten, dass Sie einen Pretest-Link zur vorletzten Fragebogen-Seite posten.
<!DOCTYPE html>
<html>
<head>
%head%
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body { margin: 0px; padding: 0px }
div.s2t-outer {
max-width: %width%; margin: 16px auto; box-sizing: border-box;
display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
-webkit-align-items: stretch;
align-items: stretch;
border: 2px solid %color.4%; vertical-align: top;
}
div.s2t-left {
width: 200px;
-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0 0 200px;
-ms-flex: 0 0 200px;
flex: 0 0 200px;
background-color: #EEEEEE; max-width: 240px;
border-right: 1px solid %color.4%; padding: 24px 10px; box-sizing: border-box;
}
div.s2t-content {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1;
-ms-flex: 1 1;
flex: 1 1;
min-width: 320px;
background-color: #FFFFFF;
padding: 24px 30px;
box-sizing: border-box;
}
div.s2t-logo img { max-width: 100%; margin-bottom: 32px; }
div.s2t-imprint { margin-top: 32px; text-align: center }
div.s2t-controls { text-align: center; }
div.s2t-controls input,
div.s2t-controls button { margin-bottom: 0.3em }
td.extended table.question th { background-color: transparent; }
td.extended div.trouble { background-color: transparent; }
@media (max-width: %width-200%) {
div.s2t-outer { display: block; margin: 0 auto; }
div.s2t-left {
display: flex;
align-items: flex-end;
width: 100%;
max-width: 100%;
border-right: 0 none;
border-bottom: 1px solid %color.4%;
padding: 1em 30px;
}
div.s2t-logo img {
max-height: 4em;
margin: 0 3em 0 0;
}
div.progressbar {
width: 100%;
max-width: 320px;
margin: 0 0 0 auto;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1;
-ms-flex: 1 1;
flex: 1 1;
}
div.s2t-content {
padding: 20px 16px;
}
}
h1 { font-size: 18px }
h1:first-child { margin-top: 0 }
a { text-decoration: none }
@media print {
div.s2t-outer { display: block }
div.s2t-left { display: none }
}
</style>
</head>
<body>
%form.open%
<div class="s2t-outer">
<div class="s2t-content">
%questionnaire%
<div>%button.submit%</div>
<div class="s2t-controls">%button.control%</div>
<div class="s2t-imprint">
%imprint%
</div>
</div>
<div class="s2t-left">
<div class="s2t-logo">%logo%</div>
%progress%
</div>
</div>
%form.close%
</body>
</html>