[Nublet]

Okay so, I have a vertical navigation bar, but the thing is when I make my window smaller the div and all the text it contains(a list) shrinks with it except my h5heading. Why is this happening and how can I fix it?

Relevant html and CSS:

<div id = "navbar">
		<h5>Navigation</h5>
		<ul>
			<li><a href = "#">Front Page</a></li>
			<li><a href = "#">Exercises</a></li>
			<li><a href = "#">Muscles</a></li>
			<li><a href = "#">Injury</a></li>
			<li><a href = "#">Filler</a></li>
			<li><a href = "#">Sumthin</a></li>
			<li><a href = "#">Filler</a></li>
			<li><a href = "#">Sumthin</a></li>
			<li><a href = "#">Filler</a></li>
			<li><a href = "#">Sumthin</a></li>
			<li><a href = "#">Filler</a></li>
			<li><a href = "#">Sumthin</a></li>
			<li><a href = "#">Yeboi</a></li>
			<li><a href = "#">Sumthin</a></li>
			<li><a href = "#">Filler</a></li>
			<li><a href = "#">Sumthin</a></li>
			<li><a href = "#">Filler</a></li>
			<li><a href = "#">Sumthin</a></li>
		<ul>
	</div>

#navbar
{
	height: 520px;
	width: 10%;
	font-size: 1.2em;
	margin-top: 2%;
	float: left;
	border-radius: 10px;
	background: url('gluteusnav.png');
	position: fixed;

}

#navbar a
{
	text-decoration: none;
	color: white;
}

#navbar ul
{
	list-style-type: none;
	margin: 1%;
	padding: 0.5%;
	width: 10%;
}

#navbar li
{
	margin: 0;
	padding: 2px 10px
}

What it looks like when I make my window smaller:

[Dormilich]

er, I don’t see the text in the list shrink either. all I can see is the first item encountering a word break (because there is a space that allows for that). all other items still fit in the width.
and since you only change the width of the window, I see no reason why the text itself should get smaller.
that the h5-heading overflows is just a CSS default setting.

[Nublet]

Dormilich, on 25 January 2013 - 03:08 AM, said:

er, I don’t see the text in the list shrink either. all I can see is the first item encountering a word break (because there is a space that allows for that). all other items still fit in the width.
and since you only change the width of the window, I see no reason why the text itself should get smaller.
that the h5-heading overflows is just a CSS default setting.

Is there something I can do to make the text fit in the container when it shrinks? Tried using % on the font-size, it didn't work haha. Should I make an "if" sentence that changes the font sixe according to the size of the screen?

[Dormilich]

if that is an issue directed to mobile devices, you need to test your code directly. just making the browser window smaller is not the same (because mobile devices have different default settings for (e.g.) font-size).

besides that, there are some extended CSS selectors that allow to assign rules depending on the available space. MDN or W3C should have something on that topic.

This post has been edited by Dormilich: 25 January 2013 - 03:34 AM

[Nublet]

Dormilich, on 25 January 2013 - 03:33 AM, said:

if that is an issue directed to mobile devices, you need to test your code directly. just making the browser window smaller is not the same (because mobile devices have different default settings for (e.g.) font-size).

besides that, there are some extended CSS selectors that allow to assign rules depending on the available space. MDN or W3C should have something on that topic.

I was roughly trying to see what it would look like on mobile/tablet or somesuch.

[LuckyRoot]

The content shrinking when you make your browser window smaller is fine but if your trying to test to see how your website would look in a mobile environment. You can add CSS media-queries to properly test that.

Ex. you would have several style-sheets:
Large resolution 1025x +
medium resolution 700px - 1024px
mobile devices - (0px - varies )
tablet devices - (0px - varies )

One way to keep text inside the container try using "position:fixed".

[andrewsw]

I believe there a number of online mobile emulators that you can test your pages in, which you might Google for.

Quote

One way to keep text inside the container try using "position:fixed".

Erm.. I certainly wouldn't consider this as a first option!! In fact, it would be my last consideration - it changes the structure and behaviour of the whole page.

This post has been edited by andrewsw: 27 January 2013 - 06:52 PM

[Nublet]

andrewsw, on 27 January 2013 - 06:52 PM, said:

I believe there a number of online mobile emulators that you can test your pages in, which you might Google for.

Quote

One way to keep text inside the container try using "position:fixed".

Erm.. I certainly wouldn't consider this as a first option!! In fact, it would be my last consideration - it changes the structure and behaviour of the whole page.

It was fixed all the time haha But yeah, I'm gonna try an emulator to see how it looks.

This post has been edited by Nublet: 28 January 2013 - 03:56 AM