Stubborn navbar won't narrow

Mobile
1

Hi

I am trying to make changes to a page so that it behaves in some respects (not all) like http://pintotours.net/Asia/Indonesia/attractions.html

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.

The test page is at http://pintotours.net/Work/TEST/bali.php

Could you help me point out the errors, please?

Thank you

LATER

It seems to be the width at which the queries kick in… but itjumps rather than reduce in width.

And I have another problem: I want the middle section totake up the space left empty by the removal of the #right sidebar.

2

Compare your #container code between the two pages…Let me know if you don’t see it.

That’s for the nav. I’m headed to work so I’ll look at yourother issue later.

3

Thanks Ryan

I hope you enjoyed your long holiday…

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

4

Ok how about you post both #container rules and we can see why one page is broken and not the other :slight_smile: . Let’s get that taken care of first.

I still repeat I do not know why you just don’t standardize your HTML structure and use ONE stylesheet site-wide :slight_smile: .

5

I mus have misunderstood your post as the css is identical:

sights.css

#container {
    max-width: 1000px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
}

bali.css

#container {
    max-width: 1000px;  
    width:100%;
margin-left:auto;
margin-right:auto;

}

It’s #box4 I’m concerned about, now.

You say one page is broken, I assume you mean the bali.html. I’ve been playing around with the queries for #box4. That’s probably why

6

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?

7

Yes, sir, I did following your instructions!

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?

8

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.

9

Hi Ryan

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?..

10

The widths for Content and #box4 are needed until the @queries kick in

#content {
    background-color:#594c26;
    height:auto;
    float: left;
    padding: 10px;
    width: 600px;
    }   
#content #box4 {
float:left;
width:580px;
height:2460px;  
margin-top: 10px;
padding-right:20px;
background-color:#FFFEFC;
}

@quesries 940px it becomes

#content {
margin-left:190px;
width:auto;
}
#content #box4 {
width:100%;
}

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.

11

Hi Ryan

I’m stuck and confused!

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!

Could you help me explain why, please?

http://pintotours.net/Work/TEST/bali.php

Thanks

PS:

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?

12

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.

Thanks

13

#content #box4{} had 20px right padding, where #box1 does now.

14

Good morning Ryan
I thought you had gone on your annual 5 weeks leave,

I thought of the padding and changed he code some 15 mins ago but it still does not work.

 @media screen and (max-width:1000px) {
 #content {
 clear:both;
margin-left:190px;
position:absolute;
top:200px;
width:auto;
max-width:600px;

}
 #box1, #box4{
 clear:both;

 width:100%;
 max-width:580px;

 padding-right:0;
 }
 #right {
 width:100%;
 max-width:190px;

Tried this too and still no good1

 @media screen and (max-width:1000px) {
 #content {
 clear:both;
margin-left:190px;
position:absolute;
top:200px;
width:auto;
max-width:600px;

}
 #box1, #box4{
 clear:both;

 width:100%;
 max-width:580px;

 }
  #box1{

 padding-right:20px;
 }
15

Morning. Nope just had a busy day yesterday.

Bali.css - still seeing this.

#content #box4 {
float:left;
width:580px;
height:2460px;  
margin-top: 10px;
padding-right:20px;
background-color:#FFFEFC;
}

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.

16

I missed you… you forced me to think and oil the old neurons!

Ok, it looks ok now. I’m going to try and sort out the rest of the header before looking at the footer.

Thanks

17

While I have your attention…

two little problems:

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!

18

I could have responded but I wanted you to critically think about your problem :slight_smile: .

Nope. Too late.

Don’t quite understand this. I’ll skip this for now.

I’m afraid your entire Content is being pushed down.

I’m afraid to know your reasonings behind your max-width:1000px media query #contnet rule…but make the following code changes.

@media screen and (max-width: 1000px){
#content {
  margin:0 190px;
  float: none;
  width: auto;
  max-width: 600px;
  overflow: hidden;
}
}
19

Hy Ryan

I’m going crazy!

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

20

Bare with me, I got almost no sleep last night and the cafeteria isn’t open to get soda (caffeine.)

Baby steps here. Please link the page in question and perhaps screenshot what’s the issue.

I’m useless without caffeine. Brain doesn’t think.