Making a fixed layout responsive

Yes, I understand. They usually are in <div></div> tags. I don’t remember ever leaving one out of them. Some even have either wrappers or containers.

Obviously lol. But here,

Is where I’m sometimes confused, as you say

If something you add causes problems, or doesn’t behave as expected, then we would need to see the full code you are using to see what has happened and help you fix it.

Confused over this too.

So how do y’all prefer to answer questions? Email, no email? here? in PM’s?

I’ve also found this helpful

1 Like

The forums are a place for public discussion, so as I’ve explained to you elsewhere, the correct place to ask questions on the forum is in a public thread. That makes the discussion available to anybody else with a similar question. Emails and PMs are not in the spirit of the forums and should therefore not be used here.

The article I linked to was intended as a general guide to asking questions, not something I expected you to take verbatim as applying in every respect to the forums. smile

By “full code”, I mean everything which is relevant to the problem at hand. Posting odd snippets of CSS without the relevant HTML is no help, and posting insufficient code to replicate the issue is of no help.

Have you read the Forum Posting Basics?

2 Likes

I understand :slight_smile: . No I haven’t, but I will.

Try just putting the clock into codepen by itself and getting it all to work there first. Remove the absolute positioning from #clock and set it to position:relative and then remove the co-ordinates and margins.

It will npw be in the flow and you can then position the smaller components on top as required. There will be issues as you have transformed it smaller which means the rest f the page will still think the clock is at the original size.

I’ve added it to the codepen I did above as a rough guide but you should try for yourself in codepen first,

2 Likes

@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