Making a fixed layout responsive

@PaulOB I see that you do have a position and margin set in this part

#clock {
  padding: 10px;
  max-width: 100%;
  min-width: 280px;
  overflow: hidden;
  padding-bottom: 40px;
  margin: 0 auto;
  position: relative;
  box-sizing: content-box;
}

As for this one

/* don't know what this is
        #clock:after {
          content: '';
          position: absolute;
          width: 400px;
          height: 20px;
          border-radius: 100%;
          left: 50%;
          margin-left: -200px;
          bottom: 2px;
          z-index: -1;
        }
*/

That is the shadow to the clock. It’s behind it, so can’t be seen really. I can eliminate it though.

Yes the position:relative is there so that the child absolute elements have a reference point for their coordinates. Without that in place you’d be placing any child elements in relation to the viewport which has been the main basis of your problems all along.

Now when you move the html for the clock then everything inside is automatically moved with it.

2 Likes

Ok. Well I’m having a terrible time putting in the am/pm part. I’m pretty sure the code is correct, as far as I know

<div id="corner"></div>
        <button id="btnPrev" type="button">&#10210;</button>
        <button id="btnNext" type="button">&#10211;</button>
        <div id="divCal"></div>
        <div id="clock" class="light">
         <div class="display">
            <div class="weekdays">
            </div>
            <div class="ampm">
            </div>
         </div>
        </div>
		</a>
      </div>
    </div>
/*-------------------------
		AM/PM
--------------------------*/


#clock .ampm {
  position: absolute;
  bottom: 20px;
  right: 8px;
  font-size: 75%;
  font-family: Segoe UI, Arial, Verdana, "Digital-7";
}

It just won’t show up anywhere. I even tried changing position:absolute to relative, top: instead of bottom:

Oh… just realized that

<div id="corner"></div>

is not relevant. Didn’t mean to copy that one.

Ok this is very VERY strange. The AM/PM will only show up…at least the background color I added to it, if I type something in between its tags <div class="ampm">123123123</div> .

Very unusual. Never encountered this before. Not even in my test page, or CodePen.

[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…