Known Participant

Question

Unexpected enlargement when launched

Forum|Forum|2 days ago
February 25, 2026
4 replies
41 views

When everything finally was organized with your help here, and the code launched many times on the web for various check-ups:

All of a sudden, the web browser version is enlarged out of proportion, distorted and the text no longer nicely wrapped as in DW! What could be the problem now? The FTP service recently updated?

As I wrote earlier, the nightmare is not over…

Ingemar

Nancy OShea

Community Expert

Your background image repeats on large devices which doesn’t look professional.

For a more polished appearance, use CSS background-size:cover and no-repeat. This will scale your background-image more appropriately.

/* Ensure the body and html elements cover the full viewport height */
html, body {
  height: 100%;
  margin: 0 auto;/** optional page centering **/
  padding: 0;
}

body {
  background-image: url("your-BGimage.jpg");
  background-color: #516113; /** color to compliment image **/ 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed; /** optional, keeps image fixed during scroll **/
}

Hope that helps.

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

Fix your CODE ERRORS as reported below.

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.saevfors.se%2Fweb_26_contact.html

Even small code errors can cause ripples on various web devices.

Get into the habit of checking your code often with these Code Validation Tools. Fix reported problems before they morph into much larger ones.

HTML: https://validator.w3.org/

CSS: https://jigsaw.w3.org/css-validator/

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

Please post a link to the actual online web page for us to examine.

It could be that you increased your browser’s ZOOM settings to make the page appear larger.

Ctrl + 0 (zero) should make it normal size again.

Ctrl ++ makes it bigger.

Ctrl + - makes it smaller.

Nancy O'Shea— Product User & Community Expert

I

ingo9Author

Known Participant

Tried Ctrl_- but no success, unfortuantely,

The link:

https://www.saevfors.se/web_26_contact.html

Nancy OShea

Community Expert

This is invalid code.

width: max 1200px;

Change it to this:

max-width: 1200px;

You’ll also need other adjustments. This image is far too wide to fit the container.

https://www.saevfors.se/images/Truss_protot.jpg

.right_side img {max-width: 100%;}

Hope that helps.

Nancy O'Shea— Product User & Community Expert

I

ingo9Author

Known Participant

Code used, see earlier message:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>web_26_new</title>
<link href="Ing_July_2021.css" rel="stylesheet" type="text/css">
<meta name="Bamboo prefab overview" content="Design solutions for bamboo combined with industrial construction materials">

<style>

* {
box-sizing: border-box;
position: static;
align-items: flex-start;
padding-top: 10px;
/*width: max 1200px;*/
}
.wrapper .left_side p {
font-weight: normal;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
body {
background-repeat: repeat;
font-family: "Times New Roman", Times, serif;

font-size: 18px;
font-weight: bolder;
/*background-color: #8EBC48;
color: #FFF;*/
background-image: url(images/Home_page_bckgr.jpg);
}
/* Logo */ .logo {
width: 95%;
margin: 0 auto;
padding: 20px 0;
}
.logo h1 {
font-family: Vijaya;
font-size: 48px;
text-align: center;
margin: 0;
padding: 0;
color: aqua
} /* Wrapper */
.wrapper {
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
color: #000;
width: 95%;
background-color: #FFF;
margin-top: 0;
margin-right: auto;
margin-left: 20px;
margin-bottom: 0;
}
/* Navigation */ .nav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
background-color: #9F0;
}
.nav li {
display: inline-block;
min-width: 8em;
margin: 0;
padding: 0;
text-align: center;
padding: 8px 15px;
}
.nav li a:link, .nav li a:visited {
background-color: rgb(204,153,51);
color: rgb(85, 85, 102);
display: block;
padding: 5px;
text-decoration: none;
font-weight: bold;
border-radius: 3px;
-webkit-box-shadow: 3px 3px 3px 3px rgba(43, 43, 77, 0.5);
-moz-box-shadow: 3px 3px 3px 3px rgba(43, 43, 77, 0.5);
box-shadow: 3px 3px 3px 3px rgba(43, 43, 77, 0.5);
margin: 0 0 0.2em 0;
}
.nav li a:hover {
background-color: rgba(255,153,0,0.8);
color: rgb(43, 43, 77);
padding-left: 8px;
}
a:visited {
background-color: #6F9;
}
/* Left side */ .left_side {
padding: 10px;
float: left;
width: 48%;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
background-color: #EFEFE0;
font-style: normal;
font-weight: 300;
}
/* Right side */ .right_side {
padding: 10px;
float: right;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333;
background-color: #EFEFE0;
width: 48%;
font-weight: lighter;
} /* footer */
.footer {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #003;
background-color: #C96;
font-style: italic;
text-align: center;
padding: 15px;
} /* Clear floats */
.clear {
clear: both;
}
.nav li a {
}
.wrapper .left_side p {
}
.caption_1 {
}
.caption_honeycomb {
padding: 10px;
width: 200px;
}
.wrapper .right_side figure {
margin: 10px;
padding-top: 10px;
}

/*Smartphone and tablet*/ @media screen and (max-width:768px) {
.left_side {
float: none;
width: 100%;
background-color: #F7F782;
}
.right_side {
float: none;
width: 100%;
background-color: #DFEAF0;
}
}
.fl {
}
.flt_rgt {
}
</style>
<style>
/* Container for the whole figure */
.figure-gallery {
max-width: 1000px;
margin: 2rem auto;
padding: 1rem;
border: 1px solid #ddd;
box-sizing: border-box;
height: 300px;
}

@Media (max-width: 640px) {
.figure-gallery.width50 {
width: 100%!important;
}

}
@Media (max-width: 640px) {
.figure-gallery.width50 {
width: 100%!important;
}
}
/* Images row */
.figure-gallery .images {
display: flex;
gap: 1rem;
flex-wrap: nowrap; /* always 3 in a row on large screens */
width: 100%;
box-sizing: border-box;
}
.figure-gallery .images img {
flex: 1 1 0;
min-width: 0; /* prevents flex overflow */
max-width: 100%;
height: auto;
display: block;
border: 1px solid #ccc;
}

/* Stack images vertically on smaller screens */
/* you can dapat the 640 to your own needs */
@Media (max-width: 640px) {
.figure-gallery .images {
flex-direction: column;
}
}
/* Caption text */
.figure-gallery figcaption {
margin-top: 1rem;
}
.figure-gallery figcaption h2 {
margin: 0 0 0.5rem 0;
font-size: 1.2rem;
}
.figure-gallery figcaption p {
margin: 0;
line-height: 1.5;
}

/* Small screens */
@Media (max-width: 768px) {
.figure-gallery .images {
justify-content: center;
}
}
}

@Media (max-width: 640px) {
.figure-gallery.width50 {
width: 100%!important;
}
}
</style>
</head>

<body>
<div class="logo"><h1>Saevfors Consulting</h1></div>
<div class="wrapper">

<ul class="nav margin-left:30px;">

<li><a href="index.html"title="Rationale" target="_blank">Rationale</a></li>
<li><a href="web_26_contact.html" title="Contact 2026" target="_blank">Contact 2026</a></li>
<li><a href="Bamboo.html">Bamboo</a></li>
<li><a href="Archive.html">Archives</a></li>
<li><a href="Multistory.html">Multistory</a></li>
<li><a href="Parametrics.html">Parametrics</a></li>
<li><a href="Space_Frames.html">Space Frame Structures</a></li>
<li><a href="Structural_Bamboo.html" title="Structural Bamboo" target="_blank">Structural Bamboo</a></li>
</ul>

</div>
<div class="clear"></div>

<div class="left_side"> <figure>
<img src="/images/A2-SEC.jpg" width="250" height="343" alt="CAD"margin=10px" class="flt_rgt"/> </figure>
<h1> BambooPrefab! </h1> <p><span style="font-size: 18px">Time for change! </span>This web site closing later this year, now focusing on: </p>

<p><span><strong>Bamboo Technical Detailing:</strong></span></p>
<ul>
<li><span style="font-weight: 600">Conflicts with industrial/planar materials.</span></li>
<li><strong>Dimensional standards</strong>.</li>
<li><strong>Template rigs for large scale production.</strong></li>
<li><strong>Computerized tools (CNC, 3Dprint etc)</strong></strong></li>




</ul>
<p><em> Previously made research and development on this site can still be sourced under the Archive tabs</em>.</p>

<img src="/images/Home_page_bckgr.jpg" alt="" width="350" height="245" class="flt_lft" margin="0" />
<p>The natural features of bamboo given by nature make each individual culm unique:
often curved, more or less tapered, sometimes with oval or irregular section, varying inter-node lengths… The strength properties of tension and compression can vary considerably according to the different 1000+ bamboo species.<br>
Matching bamboo with planar and rectilinear materials <em><strong>is therefore a huge challenge</strong></em>. Industrialization and modular design necessary for prefabrication become virtually impossible without intermediate steps to circumvent these conflicts.</p>
<figure>
<img src="/images/Ing_contact_page.jpg" alt="" width="100" height="125" margin=10px" class="flt_rgt"/><br>
<figcaption><p><em>Architect/Urban planner with longtime lnks to Africa, the Americas and SE Asia, specializes in innovative building technologies for low income regions.</em></p></figcaption>
</figure>
<h3 class="flt_rgt">ingemar@saevfors.se </h3>

<p>Kallangsvag 73, 18144 Lidingo, Sweden          +46 703936761       www.saevfors.se</p>

</div>

<div class="right_side">
<p><strong>PREFAB IN FOCUS NOW</strong>: <em style="font-weight: bold">The daunting perspective of housing another two-three billion people until 2050 on the planet is now further exacerbated by the fast climate change! </em> </p>
<em> <strong> WEBSITE UNDER UNDER REORGANIZATION  RIGHT NOW, A FEW EXAMPLES OF PREFAB ADAPTATIONS COMING UP:</strong></em>

<figure><img src="/images/Truss_protot.jpg" width="600" height="144" alt=""/>
</figure> <figcaption>Bamboo trusses and purlins</figcaption>

<a href="/Roofs.html" target="_blank">Roof structures...</a>
<figure class="flt_lft"> <img src="/images/Buckling_prevention_in_L-shape_column.JPG" alt="" width="200" height="149" class="flt_lft"/></figure>
<figcaption> <p><strong>Urban multi-story bamboo housing</strong></p>
<p><em> L-shaped column with buckling prevention for 3-storeys in cooperation with KTH, Technical University, Stockholm</em> <br>

The great CO2 sink capacity makes fast-growing bamboo an obvious large scale option for construction materials. Multi-story - at a reasonable density, because of the never-ending suburban sprawl with more transport nightmares paralyzing the economy.</p>
</figcaption>

<a href="/Multistory.html" target="_blank">Multistory housing....</a>

<figure>
<img src="/images/HONEYCOMB CLUSTER.jpg" width="77" height="100" alt="cluster"/>
<img src="/images/Wall element (2).jpg" width="58" height="100" alt=""/>
<img src="/images/Honeycomb_wall.jpg" width="132" height="100" alt=""/> <img src="/images/Ext_small.png" width="86" height="100" alt=""/>
<img src="/images/Door-frame.jpg" width="121" height="100" alt=""/>
<figcaption style="text-align:right">
Honeycomb modular wall system .............................. Resolve conflict industrial frame/bamboo curvature.
</figcaption>
</figure>
<a href="/Wall modules.html" target="_blank">Wall modules... </a><a href="/Conflicts frames.html" target="_blank">Conflict frames...</a>




</div>

<div class="clear"></div>
<div class="footer">
<p align="center" style="color: #3307E4; font-weight: bolder;"> 25 Feb 2026 | Copy with reference to www.saevfors.se | ingemar@saevfors.se | All rights reserved</p>

</div>
</body>
</html>

I

ingo9Author

Known Participant

26 Feb Nancy

It did help regarding the sizing; But not for the wrapping of text, which was perfect just before, with the recent method <figure> <figcaption> etc. Now:

https://www.saevfors.se/web_26_contact.html

I copy the code again in case some new mistakes can be detected. It seems as if an important character is missing?

Thanks, Ingemar

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>web_26_new</title>
<link href="Ing_July_2021.css" rel="stylesheet" type="text/css">
<meta name="Bamboo prefab overview" content="Design solutions for bamboo combined with industrial construction materials">

<style>

* {
box-sizing: border-box;
position: static;
align-items: flex-start;
padding-top: 10px;
max-width: 1200px;
/*width: max 1200px;*/
}
.wrapper .left_side p {
font-weight: normal;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
body {
background-repeat: repeat;
font-family: "Times New Roman", Times, serif;

font-size: 18px;
font-weight: bolder;
/*background-color: #8EBC48;
color: #FFF;*/
background-image: url(images/Home_page_bckgr.jpg);
}
/* Logo */ .logo {
width: 95%;
margin: 0 auto;
padding: 20px 0;
}
.logo h1 {
font-family: Vijaya;
font-size: 48px;
text-align: center;
margin: 0;
padding: 0;
color: aqua
} /* Wrapper */
.wrapper {
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
color: #000;
width: 95%;
background-color: #FFF;
margin-top: 0;
margin-right: auto;
margin-left: 20px;
margin-bottom: 0;
}
/* Navigation */ .nav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
background-color: #9F0;
}
.nav li {
display: inline-block;
min-width: 8em;
margin: 0;
padding: 0;
text-align: center;
padding: 8px 15px;
}
.nav li a:link, .nav li a:visited {
background-color: rgb(204,153,51);
color: rgb(85, 85, 102);
display: block;
padding: 5px;
text-decoration: none;
font-weight: bold;
border-radius: 3px;
-webkit-box-shadow: 3px 3px 3px 3px rgba(43, 43, 77, 0.5);
-moz-box-shadow: 3px 3px 3px 3px rgba(43, 43, 77, 0.5);
box-shadow: 3px 3px 3px 3px rgba(43, 43, 77, 0.5);
margin: 0 0 0.2em 0;
}
.nav li a:hover {
background-color: rgba(255,153,0,0.8);
color: rgb(43, 43, 77);
padding-left: 8px;
}
a:visited {
background-color: #6F9;
}
/* Left side */ .left_side {
padding: 10px;
float: left;
width: 48%;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
background-color: #EFEFE0;
font-style: normal;
font-weight: 300;
}
/* Right side */ .right_side {
padding: 10px;
float: right;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333;
background-color: #EFEFE0;
width: 48%;
font-weight: lighter;
}
right_side img {
max-width: 100%;
}

/* footer */

.footer {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #003;
background-color: #C96;
font-style: italic;
text-align: center;
padding: 15px;
} /* Clear floats */
.clear {
clear: both;
}
.nav li a {
}
.wrapper .left_side p {
}
.caption_1 {
}
.caption_honeycomb {
padding: 10px;
width: 200px;
}
.wrapper .right_side figure {
margin: 10px;
padding-top: 10px;
}