Making a fixed layout responsive

[tangent]

@ladans37, are you familiar with the term “a working page”?
(It’s mentioned in the “Forum Posting Basics” Forum Posting Basics).

A working page is a stand-alone HTML page that contains all of the code needed for you to demonstrate a problem on your computer. You (the author) can paste a copy of that working page in a post on the forum. One (or more) of us (helper-bees) can copy that working page to a file on our PC, give it an HTML suffix and open it in our browser(s) and see the problem exactly as you see it.

In most cases the CSS and JS can be included on the working page (which will be an HTML file, of course). If it cannot, then the required CSS and JS can be included in the post in as separate files that shall be called by links in the HTML page. Just like a regular HTML page would be written. :smile:

The concept is simple: you write a web page that demonstrates an issue, we work with a copy of it locally on our computers and ideally provide a workable solution based on your code.

You might find it less time consuming to build a new web site from scratch, which implies testing every line of code as you write it so that the contents are valid and meet your behavioural requirements, but that’s your call.

We can work with working pages or we can help you write a new site from scratch.

The following is the basic “working page” that I use when writing a web page. I add CSS at the top between the style tags and HTML between the body tags. JS usually goes just before the close body tag. Any URLs used as links must be active (full URLs are usually best), no shortcuts or local paths that go nowhere if read on someone else’s computer. It takes a little work to customize a basic “working page” for yourself but when done it is a convenient tool for troubleshooting (as well as for experimenting with new elements or constructs in isolation).

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>template</title>
<!--
notes
-->
    <style>
html {
    box-sizing:border-box;
}
*,*::before,*::after {
    box-sizing:inherit;
}
    </style>
</head>
<body>

<p>Your HTML here</p>

</body>
</html>
2 Likes