Stubborn navbar won't narrow

Mobile
61

Hi Paul

As I mentioned in my previous post I stll have “little” problems to resolve, starting with the lower break points, the footer, and the left sidebar. I will working on the lower break points next.

These areas cannot be sorted out in a rush as I still want to make modifications to their content, starting with the images.

I think… that I now have things under control and that the page is now behaving as I wanted it ti behave. I also understand that this hardly a professional approach, but then I am not, and do not intend o be a professional!

many thanks for your help. I am sure I will be back asking for answers to my “little” problems, but at this stage I think I can adavnce and get things closer to what I have in mind.

Regards

PS

Why do you say it won’t work if it is workin g already? Am I missing somthing?

62

Paul

I hope my last post does not sound ungrateful I am very grateful for your help.

I just want to add that if you look at the tiltle of this thread, I was having problems with a navbar. Ryan helped me get that right, From there we got involved with the right sidebar. Evemtually I found a solution that worked but unfortunately only for FF. So the search began to solve THAT probkem. which is now, hopefully, resolved.

Thre are lots of other problems but I will be looking at them one at a time and if I manage to solve them I will feel very proud even if it looks a mess to experienced coders like you,

I am very grateful for your help.

Regards

63

Look at my screenshots.

1 Like
64

Hi Paul

Those are screen shots of areas I had not addressed yet. One of them has been sorted out already. the other will have to wait beacuse now I am trying to sort out the top image, and having problems already…

I think that the areas that I asked the forum to help: navbar, reducing right sidebar, and reducing Content are now working as I wanted.

There are still other issues apert from the images, like the footer, but I like to take one thing at a time or I get even more confused!

65

Hi

if I may still ask for help in this thread…

Why does the top image in #box4 does not shrink as the screen narrows, like the image above in #box1?

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

Both have exactly the same code

an image

Thank you

66

If you are talking about the image under “All Inclusive Hotels” then that won’t scale because it has no reason to.

The element .hotels and the img itself both have a max-width of 208px. That means they won’t get squeezed until the layout is less than 208px.

You would need to give a percentage width to the parent so that it gets squashed with the viewport.

e.g.

.hotels {width:36%!important}

The important there is to over-ride your media queries but you won;t need it if you change the rule wherever it arises.

67

It has no need ot resize at this point. It’s within the .hotels element which is only as wide as the image. Basically the hotels element holds the image that isn’t resizing, and lets the text adjust within hte column. The .hotels element has no need to resize. It’s not set to.

68

Thank you both

I’d already been playing with .hotels and even doing .hotels .img-container without success.
I’m going to put my thinking cap on and work it out.

Thanks

69

Great!
It’s done.

As it looks as I am still in your good books…

I set the width of Content to 60% at 100px, but #box4 became too narrow; so, I increased the width to 70% which looks better.

The problem is that I wanted a greenish margin on the right and there is none when you get to 700px.

i introduced another break-point there, tried a few things and gave up!

help…

70

You can add in box-sizing:border-box to your Content. Put that in the 1000pxmedia query.

You’ll notice then that the right sidebar is visible still because as I’ve said about 10 times already, you only remove the CONTENT INSIDE of #right (if your media queries). You hide the panels. Not the actual #right element though. I can not imagine a world where you want that showing but the content inside of it hidden.

You have so many breakpoints…so unnecessary.

71

Well, you can now! Life is full of surprises! And as I mentioned earlier on, there will be something there eventually to make it look prettier!|

Some people are very tidy and clean as you go. I am very messy: I do the cleaning up when it’s all finished. And as I don’t know wht’s needed and not needed, I take things aout and wait to see if it affected the page…

Now

Without px size? I’ve put it in and doesn’t seem to do much…
Can’t I just force a margin-right to the thing, as I tried and is still there?

72

Nothing works!

i tried body{border-right:solid red 10px;} but somehow it only works where I don’t want it!

Why?

73

More padding on Content will give more green space. It currently has 10px (thus that 10px of green on the right is from padding.)

74

Hi Ryan

I gave it padding-right:30px. but still the same

meanwhile I have somthing much graver: at media 800px the #nav is not changing over to the #horizontal as it did earlier. I’ve checked the code and cannot see what went wrong

i’m about to give up! oyu’ll be pleased to learn…

I’m going to back up if I gate the navbar sorted out and carry on tomorrow. had enough for one day!

75

Just go give up. I feel bad. This page is sickly and weak. It’s on life support. I keep giving it CPR but then it has another asthma attack and almost keels over.

It’s time to pull the plug, mate.

76

Could you see what I did to the navbar, please?

77

Hi

I found the problem All’s well!

Over and out!

78

Hi

You’ll be pleased to know that I have finished the page, for the time being!

I still have to sort out paddings and margins, which are driving me mad, but the main page is complete, until I change my mind and start again.

Many thanks to both of you, Ryan and Paul

79

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.