I’ve copied some of the code of both html and css across to the test page but at the moment I cannot understand why the navbar and the header do not adjust gradually as the screen narrows, in the same fashion as the the page I am copying from.
Ok, I see what was wrong with the navbar and header, but I’m still stuck with the #box4 to take up all available space when #right (sidebar) is taken off, at @media 1000px
When I first looked this morning, there was no max-width, but only width:1000px on your broken test page. Did you fix that…? Am I going senile already?
You need to remove your widths on your column elements. All your columns. C’mon now you have to know by now that setting widths on your page leads to restrictive pages and makes it really hard to make it responsive?
I also believe that I got rid of all the widths, execpt those that I need: sidebars, which I do not want to change in width. I prefer that they disappear at a command!
EDIT
At the moment the #right sidebar disaapears at 1000px. What I need is for #box4 to take up the space that was left empty on the right and to shrink from then on as the screen narrows. is that possible?
They can still disappear on command though via the display:none’s you are giving.
The problem is that your Content area isn’t set up to adapt to the full width of hte page (minus your left sidebars width) so you need to set up a media query to do that (remove the #contents float/width. I forget if it has a width. Then give it margin-left:190px. 190px is the width of hte left sidebar.) But then your boxes inside of Content have a fixed width so those need to be reworked to not have that…
Could be more easily achieved in display:table/table-cell though.
There are no other boxes other than #box4. That’s old code that will be cleaned up later. I’m not sure that I did what you told me to, but the thing still does not work
EDIT
I’ve just realized there was a typing mistake in #contents with a funny width. I’ve changed that (which was previously 600px) to 100%. but it does not work
If it is not possible to expand (as gainst shrink) #box4 to take up empty space on the right, then an alternative would be to display none everything inside #right and allow the empty sidebar to shrink until it disappears. makes sense? N0?..
But what, I think needs to spread out is Content and I can’t make it work. maybe leaving #right and allowing it to shrink is the better solution.
LATER
In fact, if #box4 were to expand not only the text but especially the image abobe #box1 would look really silly!. So, the ansewer, if you can help me is to make the #right shrink as the screen narrows.
I took out all the panels in the #right sidebar (@queries 1000px) in preparation to allow the sidebar to shrink as the screen narrows. But the whole sidebar disappeared!
Well I found out why. It’s due to this code in the same queries
#right {
width:auto;
max-width:190px;
}
Now, the pronblem is: if I take that code out the sidebar behaves as expected, but the middle content #box4 disappears off to th bottom…
If I make #right {width:100%;} then I think it would work if it were not for the fact that #box4 is no longer where it should be. So, what do I have to do to #box4?
Well, I think I got somewhere in what I expect is a very unorthodox fashion… and the bottom and footer (which I will porbably take out along with #box1 at one stage) still need sorting out.
My lastest headache is that I cannot understand why at 1000 px #box1 is not as wide as #box4. Any help here would be appreciated.
That rule has more specificity than that #box4{} rule so that padding-right:0; rule (well any conflicting rule) will not be used. Update your media query for box1/4 to include Content. So they should be Content#box1/4{} etc.
a) I tested the image as it is in the published page 600x250 b
Also it does not adjust as the screen narrows.
b) #box1 when it gets to queries (800px) acquires an extra margin on top. I’ve looked at the #nav and .small-nav margins and paddings and cannot see anything to cause that.
if you have time…
Thanks
DISASTER
With all the messing about with the image the "#box4 no longer adjusts as the screen narrows? What have I done? it worked fine a little while ago!
The page worked fine about an hour ago except for little things. I tried to add the img-container code to make the image in #box1 shrink as the secreen narrowed. Things started to go wrong, #box4 no longer adjusts to the screen as it did. I’ve retraced my steps but it is still no good.
Now, I introduced tyour code but it makes the #right sidebar stay in place throughout, at the xpense of #box4.
Could you help me get the page back where it was so that I can back it up?
Thanks
PANIC, PANIC!
Right, I took the image out and it looks as I have the page as it was.
So, back to the code you sent me. It solves the top, but makes the sidebar stay full and take over from the #box4