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

@ronpat hi. Yes I’m familiar with that, and the process :slight_smile:

My clock’s JS is not even working for crying out loud. It’s supposed to highlight the current day, but it isn’t. I don’t know what’s going on. I’ve not done anything.

Did you include all the relevant JS files?

The clock in my codepen above seems to work ok.

Unfortunately we can’t help debug something we can’t see.

3 Likes

Why don’t you compare the code on your test page or your CodePen to the code with the problem that you are seeing now and find out what is different???

@ronpat , @PaulOB it’s all good now. I ended up bringing in the whole code to the clock together, and that worked out.

Could y’all help me explain this problem?

Screenshot_2021-03-04 Writer on Wheels

My bar and my quotebox has overlapped into my main for some reason. I thought the left column is supposed to expand when this happens?

Here’s the related code:

.rainbow{
  width:335px;
  height:7px;
  position:absolute;
  top:385px;
  left:3px;
  z-index:1;
  background-image: linear-gradient(45deg, black 22.22%, black 22.22%, black 44.44%, black 44.44%, #f8edd2, black, black 50%, #453a64 50%, black 72.22%, black 72.22%, #2c2046 94.44%, black 94.44%, #f8edd2, #f8edd2, black 100%);
  background-repeat:repeat-x;
  background-size:50px 50px;
  background-position:100% 100%;
  animation:go 15s linear infinite;
  border-radius:15px;
  box-shadow: 0 2px 10px 0 rgba(255,255,255,.4);
}

.rainbowreflection{
  width:335px;
  height:7px;
  position:absolute;
  top:397px;
  left:3px;
  z-index:1;
  background-image: linear-gradient(45deg, black 22.22%, black 22.22%, black 44.44%, black 44.44%, black, black, black 50%, #453a64 50%, black 72.22%, black 72.22%, #2c2046 94.44%, black 94.44%, black, #f8edd2, black 100%);
  background-repeat:repeat-x;
  background-size:50px 50px;
  background-position:100% 100%;
  animation:go 15s linear infinite;
  border-radius:15px;
  filter: blur(3px);
  opacity:.8;
  
}

@-webkit-keyframes go{
  0%{background-position:0% 0%;}
  100%{background-position:400px 0;}
}

.quoteandpic {
    position:relative;
    top:-385px;
    left:-7px;
    z-index:1;
    width:365px;
    height:200px;
    background:rgba(0, 0, 0, 0.7);
    border-top:0px ridge #ccc;
    border-bottom:0px ridge #ccc;
    box-shadow: inset 0px 15px 8px -10px #1a0430, inset 0px -12px 8px -10px #1a0430;
}

.shine-animationtop {
	position:relative;
    top:-784px; 
    left:-7px;
	z-index:9999;
    width:365px;
    height:.6px;
	background-color: rgba(0, 0, 0, 0.1);
	background: linear-gradient(
		135deg,
		rgba(0, 0, 0, 0.7) 0%,
		rgba(0, 0, 0, 0.7) 40%,
		white 50%,
		rgba(0, 0, 0, 0.7) 60%,
		rgba(0, 0, 0, 0.7) 100%
	); 
	background-size: 400% 100%;
	background-position: 100% 50%;
	animation: animation-shine 15s 0s infinite; 
}

@keyframes animation-shine {
	0% {
		background-position: 100% 50%;
	}
	50% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 100% 50%;
	}
}

.shine-animation {
	position:relative;
    top:-585px;
    left:-7px;
	z-index:4;
  	width:365px;
  	height:.6px;
	background-color: rgba(0, 0, 0, 0.1);
	background: linear-gradient(
		135deg,
		rgba(0, 0, 0, 0.7) 0%,
		rgba(0, 0, 0, 0.7) 40%,
		white 50%,
		rgba(0, 0, 0, 0.7) 60%,
		rgba(0, 0, 0, 0.7) 100%
	); 
	background-size: 400% 100%;
	background-position: 100% 50%;
	animation: animation-shine 15s 0s infinite;
} 

@keyframes animation-shine {
	0% {
		background-position: 100% 50%;
	}
	50% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 100% 50%;
	}
}

.blurred {
  position:absolute;
  top:417px;
  left:-7px;
  z-index:3;
  background-image: repeating-linear-gradient(132deg, transparent 12%, transparent 60%, rgba(153, 153, 153,.2) 70%, transparent 82%);
  border: 0px solid rgba(255,255,255,1);
  box-shadow: 0 20px 50px -10px rgba(0,0,0,.5);
  box-shadow: inset 1px 1px 0px rgba(155,155,155,0.3),
						inset 0px 0px 10px rgba(155,155,155,0.2),
						0px 1px 2px rgba(0,0,0,0.3),
						-5px 5px 15px rgba(0,0,0,0.3);
  height:200px;
  width:365px;
}

.quote {
    position:relative;
    top:-624px;
    left:14px;
    z-index:2;
    width:200px;
    height:100px;
    color:#000;
    font-family:Laila, Arial, Verdana, Overpass;
    font-size:68px;
    text-shadow:none;
    background:none;
    font-style:italic;
    -ms-transform: rotate(180deg); /* IE 9 */
  	-webkit-transform: rotate(180deg); /* Safari 3-8 */
  	transform: rotate(180deg);
  	opacity:.6;
  	filter: drop-shadow(1px 2px 2px #aaa);
}

.quote2 {
    position:relative;
    top:-655px;
    left:185px;
    z-index:2;
    width:200px;
    height:100px;
    color:#ffcd36;
    font-family:Fertigo Pro, Overpass, Verdana, Segoe UI;
    font-size:20px;
    font-style:italic;
    text-shadow:none;
    background:none;
}

.author {
    position:absolute;
    top:75px;
    left:15px;
    z-index:1;
    width:150px;
    height:100px;
    color:#aaa;
    font-family:Open Sans, Verdana, Segoe UI;
    font-size:16px;
    font-weight:bold;
    text-shadow:none;
    font-style:normal !important;
}

.occupation {
    color:#aaa;
    z-index:1;
    position:absolute;
    top:95px;
    left:14px;
    font-family:Open Sans, Arial, Verdana, Segoe UI;
    font-size:16px;
    font-style:italic !important;
    font-weight:none;
}

.work {
    font-family:Open Sans, Arial, Verdana, Segoe UI;
    font-style:italic !important;
	position:absolute;
    top:585px;
    left:200px;
    font-size:16px;
    width:150px;
    color:#ffa87d;
    transition: transform .5s; /* Animation */
    transition:all .5s ease-in-out;
    outline:none;
	z-index:9999;
}

It looked fine on my test page

Explain it? Don’t you think describing/explaining a problem is your job?
Code it for you, maybe? No, you have not provided enough information about the problem.

It would be better for all concerned if you would build a new site from scratch and learn how the code works as you write it.

Realistically, if you do not want to make the effort to write a proper site, you would be better off hiring a consultant-coder to fill your orders.

I’m already on a new site, thanks to Paul’s help. I’m on a 3 column now. And as far as I know, I have already shared the related code to the problem, as well as explaining what’s going on.

What was provided was the CSS only. That is only half of the story.
As you should know by now, CSS without the HTML it relates to is meaningless.

3 Likes

Ok here you go

.rainbow{
  width:335px;
  height:7px;
  position:absolute;
  top:385px;
  left:3px;
  z-index:1;
  background-image: linear-gradient(45deg, black 22.22%, black 22.22%, black 44.44%, black 44.44%, #f8edd2, black, black 50%, #453a64 50%, black 72.22%, black 72.22%, #2c2046 94.44%, black 94.44%, #f8edd2, #f8edd2, black 100%);
  background-repeat:repeat-x;
  background-size:50px 50px;
  background-position:100% 100%;
  animation:go 15s linear infinite;
  border-radius:15px;
  box-shadow: 0 2px 10px 0 rgba(255,255,255,.4);
}

.rainbowreflection{
  width:335px;
  height:7px;
  position:absolute;
  top:397px;
  left:3px;
  z-index:1;
  background-image: linear-gradient(45deg, black 22.22%, black 22.22%, black 44.44%, black 44.44%, black, black, black 50%, #453a64 50%, black 72.22%, black 72.22%, #2c2046 94.44%, black 94.44%, black, #f8edd2, black 100%);
  background-repeat:repeat-x;
  background-size:50px 50px;
  background-position:100% 100%;
  animation:go 15s linear infinite;
  border-radius:15px;
  filter: blur(3px);
  opacity:.8;
  
}

@-webkit-keyframes go{
  0%{background-position:0% 0%;}
  100%{background-position:400px 0;}
}

.quoteandpic {
    position:relative;
    top:-385px;
    left:-7px;
    z-index:1;
    width:365px;
    height:200px;
    background:rgba(0, 0, 0, 0.7);
    border-top:0px ridge #ccc;
    border-bottom:0px ridge #ccc;
    box-shadow: inset 0px 15px 8px -10px #1a0430, inset 0px -12px 8px -10px #1a0430;
}

.shine-animationtop {
	position:relative;
    top:-784px; 
    left:-7px;
	z-index:9999;
    width:365px;
    height:.6px;
	background-color: rgba(0, 0, 0, 0.1);
	background: linear-gradient(
		135deg,
		rgba(0, 0, 0, 0.7) 0%,
		rgba(0, 0, 0, 0.7) 40%,
		white 50%,
		rgba(0, 0, 0, 0.7) 60%,
		rgba(0, 0, 0, 0.7) 100%
	); 
	background-size: 400% 100%;
	background-position: 100% 50%;
	animation: animation-shine 15s 0s infinite; 
}

@keyframes animation-shine {
	0% {
		background-position: 100% 50%;
	}
	50% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 100% 50%;
	}
}

.shine-animation {
	position:relative;
    top:-585px;
    left:-7px;
	z-index:4;
  	width:365px;
  	height:.6px;
	background-color: rgba(0, 0, 0, 0.1);
	background: linear-gradient(
		135deg,
		rgba(0, 0, 0, 0.7) 0%,
		rgba(0, 0, 0, 0.7) 40%,
		white 50%,
		rgba(0, 0, 0, 0.7) 60%,
		rgba(0, 0, 0, 0.7) 100%
	); 
	background-size: 400% 100%;
	background-position: 100% 50%;
	animation: animation-shine 15s 0s infinite;
} 

@keyframes animation-shine {
	0% {
		background-position: 100% 50%;
	}
	50% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 100% 50%;
	}
}

.blurred {
  position:absolute;
  top:417px;
  left:-7px;
  z-index:3;
  background-image: repeating-linear-gradient(132deg, transparent 12%, transparent 60%, rgba(153, 153, 153,.2) 70%, transparent 82%);
  border: 0px solid rgba(255,255,255,1);
  box-shadow: 0 20px 50px -10px rgba(0,0,0,.5);
  box-shadow: inset 1px 1px 0px rgba(155,155,155,0.3),
						inset 0px 0px 10px rgba(155,155,155,0.2),
						0px 1px 2px rgba(0,0,0,0.3),
						-5px 5px 15px rgba(0,0,0,0.3);
  height:200px;
  width:365px;
}

.quote {
    position:relative;
    top:-624px;
    left:14px;
    z-index:2;
    width:200px;
    height:100px;
    color:#000;
    font-family:Laila, Arial, Verdana, Overpass;
    font-size:68px;
    text-shadow:none;
    background:none;
    font-style:italic;
    -ms-transform: rotate(180deg); /* IE 9 */
  	-webkit-transform: rotate(180deg); /* Safari 3-8 */
  	transform: rotate(180deg);
  	opacity:.6;
  	filter: drop-shadow(1px 2px 2px #aaa);
}

.quote2 {
    position:relative;
    top:-655px;
    left:185px;
    z-index:2;
    width:200px;
    height:100px;
    color:#ffcd36;
    font-family:Fertigo Pro, Overpass, Verdana, Segoe UI;
    font-size:20px;
    font-style:italic;
    text-shadow:none;
    background:none;
}

.author {
    position:absolute;
    top:75px;
    left:15px;
    z-index:1;
    width:150px;
    height:100px;
    color:#aaa;
    font-family:Open Sans, Verdana, Segoe UI;
    font-size:16px;
    font-weight:bold;
    text-shadow:none;
    font-style:normal !important;
}

.occupation {
    color:#aaa;
    z-index:1;
    position:absolute;
    top:95px;
    left:14px;
    font-family:Open Sans, Arial, Verdana, Segoe UI;
    font-size:16px;
    font-style:italic !important;
    font-weight:none;
}

.work {
    font-family:Open Sans, Arial, Verdana, Segoe UI;
    font-style:italic !important;
	position:absolute;
    top:585px;
    left:200px;
    font-size:16px;
    width:150px;
    color:#ffa87d;
    transition: transform .5s; /* Animation */
    transition:all .5s ease-in-out;
    outline:none;
	z-index:9999;
}
<div class="rainbow"></div>
		<div class="rainbowreflection"></div>
		<div class="quoteandpic"></div>
<div class="quote">”</div><div class="quote2">Let's focus on the<br>things we can do.”<p class="author">Holly B. Tucker</p><p class="occupation">Blogger</p></div>
		<a class="work" href="https://www.hollyshorrorland.com/">Holly's Horrorland</a>

As far as I can see, the problem is your continuing to position everything instead of allowing elements to follow any kind of natural flow within the document.

I’m not sure how to communicate this concept to you, as it has been mentioned before, but you still have not grasped it.
The principles would be that very few page elements ever need to be positioned, but one element naturally follows the previous one, taking its place after it, without being told where to be.
Just as, in text, one letter follows the previous, one word follows another, until the line is full, then a new line begins. That is how in-line and flow content positions itself.
Block elements follow vertically, one block element, followed by another beneath it.

This is how elements will position themselves, one after another.
Either side-by side, or stacked vertically.
By combining and nesting these, more complex layouts can be achieved.

With this natural flow, content is able to rearrange itself as screen space varies. While a rigid layout, with everthing positioned by magic numbers, will not.

I think things need to go right back to basics. Forget about “fancy things” like animations, clocks and the tiny minor details of these things, for the time being.
Focus on first creating the 3 column layout, firstly with nothing but text content,as this is the easiest to manage. Only when that works, start to add other things like images, one piece at a time.

2 Likes

Focus on first creating the 3 column layout, firstly with nothing but text content,as this is the easiest to manage. Only when that works, start to add other things like images, one piece at a time.

I have been doing this since Paul gave me the Pen to work on the rest.

continuing to position everything instead of allowing elements to follow any kind of natural flow within the document.

I can position them using either the position or the margin properties. This is sounding like you want me to use neither…

Thought as you add more and more into the column, the column is supposed to widen, but maybe I’m wrong…

I have updated my site referenced in Post: 38

https://this-is-a-test-to-see-if-it-works.tk/sp/sp-j/ladans37/

The menu shows three links:

  1. Link to Raw script copied from Tumblr with major errors such as duplicate DOCTYPE, etc
  2. Link to validated page with ALL errors and warnings removed
  3. Link to demo.html web page. Source code can be copied and pasted to your desktop AND source can also be pasted into the w3. validation tools.

Some colours and positions may require some Tender Loving Care :).

BEWARE: Please note that any slight adjustment should be validated before proceeding to further modifications.

1 Like

The width of the column is designed to vary with the width of the visitor’s viewport, so that no matter what device or screen resolution they are using, they can always see your full content.

Did you read the link I provided in the first post, which explains the principals of responsive design? It’s hard to see how you can make progress without first having an understanding of what you’re trying to achieve.

All the information you need has already been given in this thread, with links to other resources where appropriate.

If there is not enough room for the content at a given screen width, then you need to use media queries to adjust the content. If there is not enough room for the content at the maximum dimensions of the page (as now), you need to rethink your content.

1 Like

If you absolutely position something it is removed from the flow of the document. The parent of the absolute element will assume it has no content. Therefore if a column width depends on its content width then the column will not react to the absolute element at all and the absolute element will just overlap what is in the way.

That is why we keep telling you that you can only use absolute positioning in controlled situations.

You are still not understanding the concept. In most cases you don’t need to position your main elements at all (apart from small vertical margins). Each element will naturally follow the element before it without you doing anything to it at all.

Avoid fixed widths and heights wherever possible and let them fill them fill or adapt to the available space. Make sure images are fluid or can adapt to smaller/larger columns.

Don’t position your elements but let the structure of the page hold then in the correct place (like the 3 column flexbox already shown) .

Create fluid elements that work for the web and not something you’ve seen drawn in photoshop.

As others have said stop adding all these effects (they please no one but you) and first just concentrate on your content which I assume is your blog posts. Once you have your basic content working fluidly over all devices then you can start adding your widgets one at a time but in most cases they will need rebuilding as most of your widgets belong in 1991 and not 2021.

5 Likes

Thanks everyone, I will keep trying.

1 Like

Yes. :smile:

So at what point did it go wrong?
Rewind to there.

3 Likes