Yes, I agree, this bottom section is really not structured in a way conducive to changing it to a fluid layout.
I guess I’m to go dig through this CSS reference. Hopefully, I’ll gather a clue as to what styles need to be applied to achieve said objectives, but right now, I’m scratching my head. I’ve said this before, but I need to go grab a CSS book.
I did add a container to the h3 links.
<div id="navlinkscontainer">
<h3>
<a href="../index.html">Back to the Home Page ––></a><br />
<a href="../insurance.html">Back to the Insurance Section ––></a>
</h3>
</div>
I deleted the overflow:hidden; from #bottomlink, and I do see what you’re saying as the container height does not change. Could it just be that height needs to be set to auto in the media query styles?
Again, I’ll go take a good look at the CSS reference. This sounds like a resource that should always be open when styling a page.
Edit: if the sawtooth edges for the h2 link are more easily done without, it is definitely worth scrapping as proper responsive design functionality is more important. With that said, however, I would like to keep it. I think it looks nice and drags users’ mouse to that area (I had that in mind when doing the original design).
As I said, I’ll look at the h2 styles with an eye toward keeping the sawtooth pattern, but no rash promises . Just because something seems impossible doesn’t mean that it can’t be done . Ask any magician (or Paul ) Even if the sawtooth border doesn’t work out, you should be able to keep the background pattern.
I think the form is going to require more work than anything else at the bottom. It needs to be in its own container so it is not influenced by the width of the window. You might want to start there.
Well, I figured out the #bottomlink text-wrapping issue when it doesn’t adjust the height of the container. I just added this in:
@media screen and (max-width:600px){
h2 a, h2 a:hover{height:auto;}
}
It doesn’t matter about the sawtooth background when the viewport is less than 600px wide (or when the width of the h2 link exceeds the width of #lpcontent). Is there a way to detect when the sawtooth edges are touching the edges of #lpcontent?
I tried to use percentages on the h3 links font size, so that it would shrink and grow as the width changes, but I haven’t figured that out yet. That’s something I would like to accomplish.
#emailbox is now inside its own container.
I haven’t been able to figure out how to re-position and center #emailbox on top of the h3 links.
Actually, as far as the re-position of the bottom h3 links and the email box, I think it makes sense to just re-position them on top of each other at, say, 500px width. That means it will be time to remove the current positioning. Though, the email box has its own container now, and I’m not entirely sure what needs to be put inside of #emailboxcontainer, so right now I’m focused on #emailbox form element itself. The email box has an image absolutely positioned on top of it while the other form elements are sitting underneath, so the positioning of the emailbox form element- I believe- is relative and it’s just got margins. Would I just put something like this to put it in the center and negate the current positioning?
@media and screen (max-width:500px){
#emailbox{position:none; margin:0 auto;}
}
The problem that I see with the e-mail form is the “straggling” “Invalid E-Mail” image. It’s absolutely positioned; therefore, needs to be within the relatively positioned element. As you said, at this time, the form is that element, so the Invalid E-mail image is outside of it. It’s inside #emailboxcontainer, but #emailboxcontainer is not p:r. I’m not intimately familiar with forms, so I will have to read a bit before I can confidently offer any suggestions.
I have the elements positioned, centered on top of each other at 500px. It looks nice when it’s all shrunken down; however, one thing that I see that I don’t feel so great about is since the width of the edge cells shrinks by 40 pixels at viewport width of 700 pixels, it causes the email box and h3 nav links to bounce around in all sorts of ways. I’d like them to be more stationery instead of bouncing around as you’ll notice.
There are several ways of containing and moving #emailboxcontainer and #navlinkscontainer. All use media queries. I began setting up several demo examples last night when my young cat hopped on the desk and stepped on the “delete everything” key (I didn’t even know there was such a key!) and I lost everything.
Your solution seems to work nicely, though, so there is probably no need to build the demos. If I do, I’ll post them in this thread FYI. Likewise, I still haven’t given up on the “call to action” button, either. If anything works out, I’ll add it here, too.
You’re making nice progress. Will look for you in the new threads.
PS: In what part of Alanta do you live? I lived near Stone Mountain years ago.
. Just because something seems impossible doesn’t mean that it can’t be done 
. Ask any magician (or Paul