How can I fix this?

I've got a website that looks fine, except in the situation where you're looking at it on a mobile device, or a laptop with a smaller screen.

Bottom line: the last link in my nav bar is wrapping around and it's not a scenario I can duplicate by simply making the screen smaller when I'm on my computer.

How do I remedy this situation so the size of the screen stays fixed and the links aren't allowed to wrap.

A screen shot is attached and the url to the stylesheet in question is http://www.trinityspringhill.org/stylesheet.css

BTW: In case the screenshot isn't especially obvious, the link in question is the "contact" link. It should be on the every end of the nag bar on the right hand side. Instead it's sitting as a hopeless orphan beneath the "home" link on the left.
photo.PNG
brucegustPHP DeveloperAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Tom BeckConnect With a Mentor Commented:
The real answer is not to use padding at all. What you are experiencing is explained here and a solution is suggested. I wouldn't go that route because I think it adds insult to injury.

Instead of padding out the links, provide a width in percentage for the <li> tags. Also, the container that holds the nav items is wider than the content area because you have padding on that as well. Div id="nav_bar" is 997px wide. Inside that is div id="navcontainer". That is also 997px wide except that you have 25px of padding making it 1022px wide.

Here's a mockup of your page with the <li> tag width in percentages and no padding. I also changed the font sizes to em instead of px because ems are more scalable. I adjusted the padding and width on id="navcontainer" and eliminated the messed up tags around your form. Check this mock up out in all browsers including mobile.

http://jsbin.com/ziwiy/1

NOTE: I chose percentages for widths because I'm accustomed to building fully responsive sites. Since you have a fixed width of 997px for your content area, you could simply use pixels for the width of the <li> tags.
0
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
The link helps us see the problem on mobile... but can't give you any advice until we see the code.

My best guess is you need to adjust your left and right padding.  You have a total of 70px  (35 left and 35 right) times 7 links that is 490px of space.  Play with taking it down by 5 at a time and see what happens.
#navcontainer ul li a
{
font-family: Arial Narrow, Microsoft Sans Serif, Helvetica;
font-size: 18px;
color:#493417;
font-weight:bold;
text-decoration: none;
padding-left:35px;
padding-right:35px;
display:block;
}

Open in new window

0
 
Tom BeckCommented:
Scott has it exactly right. Playing with the css at trinityspringhill.org/?mobile_override=1 on an iOS simulator, making the left and right padding 27px on #navcontainer ul li a instead of 35px, fixes the problem.
0
 
brucegustPHP DeveloperAuthor Commented:
Gentlemen...

Thanks for the input. I have a screenshot attached and I wanted you to see the dilemma that occurs when I change the padding. Basically, while it seems like I've got the necessary room, my whole list of links has shifted to the left.

Initially, I thought I would just put some padding on the left hand side to center it, but then I paused, wondering if that wasn't going to bring the original problem back into the picture.

How can I center things and still preserve the solution that you've recommended?

Here's the code for the nag bar:

<div id="nav_bar">
		<div id="navcontainer">
		<ul>
		<li><A HREF="index.php">Home</a></li>
		<li><A HREF="about.php">About</a>
			<ul>
			<li><A HREF="beliefs.php">Vision and Mission</a></li>
			<li><A HREF="times.php">Service Times</a></li>
			<li><A HREF="directions.php">Map and Directions</a></li>
			<li><A HREF="directory.php">Sunday Morning Life Groups</a></li>
			<li><A HREF="directory.php#weekly">Weekly Life Groups</a></li>
			<li><A HREF="church_staff.php">Church Staff</a></li>
			</ul>
		</li>
		<li><A HREF="worship.php">Worship</a>
			<ul>
			<li><A HREF="directory.php#sunday">Sunday Morning Life Groups</a></li>
			<li><A HREF="program_display.php?id=8">Child Care</a></li>
			</ul>
		</li>
		<li><A HREF="visitors.php">First Time Guests</a>
			<ul>
			<li><A HREF="visitors.php">What to Expect</a></li>
			<li><A HREF="times.php">Service Times</a></li>
			<li><A HREF="directory.php#sunday">Sunday Morning Life Groups</a></li>
			<li><A HREF="program_display.php?id=8">Child Care</a></li>
			<li><A HREF="directions.php">Map and Directions</a></li>
			</ul>		
		</li>
		<li><A HREF="index.php">Programs</a>
			<ul>
			<li><A HREF="missions.php">Missions</a></li>
			<li><A HREF="directory.php#weekly">Weekly Life Groups</a>
				<ul>
				<?php
				$bert = "select * from programs order by sort_order";
				$bert_query=mysqli_query($cxn, $bert)
				or die("Couldn't execute query.");
				while($bert_row=mysqli_fetch_assoc($bert_query))
				{
				extract($bert_row);
				?>
				<li><A HREF="program_display.php?id=<?php echo $bert_row['id']; ?>"><?php echo stripslashes($bert_row['name']); ?></a></li>
				<?php
				}
				?>
				</ul>
			</li>
			<li><A HREF="campus/index.php" target="_blank">Online Campus</a></li>
			</ul>	
		
		
		</li>
		<li><A HREF="calendar.php">Calendar</a>
			<ul>
			<?php
			$george = "select sum(sort_order) as sort_value from calendar_category";
			$george_query=mysqli_query($cxn, $george)
			or die("Couldn't make george work.");
			$george_row=mysqli_fetch_assoc($george_query);
			extract($george_row);
			if($george_row['sort_value']>0)
			{
			$marlana="select * from calendar_category order by sort_order";
			}
			else
			{
			$marlana="select * from calendar_category order by name";
			}
			$marlana_query=mysqli_query($cxn, $marlana)
			or die("Couldn't execute query.");
			$marlana_count =mysqli_num_rows($marlana_query);
			if($marlana_count>0)
			{
				while($marlana_row=mysqli_fetch_assoc($marlana_query))
				{
				extract($marlana_row);
			?>
			<li><A HREF="calendar_category.php?id=<?php echo $marlana_row['id']; ?>"><?php echo stripslashes($marlana_row['name']); ?></a></li>
			<?php
				}
			}
			?>
			</ul>
		</li>
		<li><A HREF="directions.php">Contact</a>
			<ul>
			<li><A HREF="prayer_requests.php">Prayer Requests</a></li>
			<li><A HREF="directions.php">Map and Directions</a></li>
			</ul>
		</li>
		</ul>
		</div>
	</div>

Open in new window

<div id="nav_bar">
		<div id="navcontainer">
		<ul>
		<li><A HREF="index.php">Home</a></li>
		<li><A HREF="about.php">About</a>
			<ul>
			<li><A HREF="beliefs.php">Vision and Mission</a></li>
			<li><A HREF="times.php">Service Times</a></li>
			<li><A HREF="directions.php">Map and Directions</a></li>
			<li><A HREF="directory.php">Sunday Morning Life Groups</a></li>
			<li><A HREF="directory.php#weekly">Weekly Life Groups</a></li>
			<li><A HREF="church_staff.php">Church Staff</a></li>
			</ul>
		</li>
		<li><A HREF="worship.php">Worship</a>
			<ul>
			<li><A HREF="directory.php#sunday">Sunday Morning Life Groups</a></li>
			<li><A HREF="program_display.php?id=8">Child Care</a></li>
			</ul>
		</li>
		<li><A HREF="visitors.php">First Time Guests</a>
			<ul>
			<li><A HREF="visitors.php">What to Expect</a></li>
			<li><A HREF="times.php">Service Times</a></li>
			<li><A HREF="directory.php#sunday">Sunday Morning Life Groups</a></li>
			<li><A HREF="program_display.php?id=8">Child Care</a></li>
			<li><A HREF="directions.php">Map and Directions</a></li>
			</ul>		
		</li>
		<li><A HREF="index.php">Programs</a>
			<ul>
			<li><A HREF="missions.php">Missions</a></li>
			<li><A HREF="directory.php#weekly">Weekly Life Groups</a>
				<ul>
				<?php
				$bert = "select * from programs order by sort_order";
				$bert_query=mysqli_query($cxn, $bert)
				or die("Couldn't execute query.");
				while($bert_row=mysqli_fetch_assoc($bert_query))
				{
				extract($bert_row);
				?>
				<li><A HREF="program_display.php?id=<?php echo $bert_row['id']; ?>"><?php echo stripslashes($bert_row['name']); ?></a></li>
				<?php
				}
				?>
				</ul>
			</li>
			<li><A HREF="campus/index.php" target="_blank">Online Campus</a></li>
			</ul>	
		
		
		</li>
		<li><A HREF="calendar.php">Calendar</a>
			<ul>
			<?php
			$george = "select sum(sort_order) as sort_value from calendar_category";
			$george_query=mysqli_query($cxn, $george)
			or die("Couldn't make george work.");
			$george_row=mysqli_fetch_assoc($george_query);
			extract($george_row);
			if($george_row['sort_value']>0)
			{
			$marlana="select * from calendar_category order by sort_order";
			}
			else
			{
			$marlana="select * from calendar_category order by name";
			}
			$marlana_query=mysqli_query($cxn, $marlana)
			or die("Couldn't execute query.");
			$marlana_count =mysqli_num_rows($marlana_query);
			if($marlana_count>0)
			{
				while($marlana_row=mysqli_fetch_assoc($marlana_query))
				{
				extract($marlana_row);
			?>
			<li><A HREF="calendar_category.php?id=<?php echo $marlana_row['id']; ?>"><?php echo stripslashes($marlana_row['name']); ?></a></li>
			<?php
				}
			}
			?>
			</ul>
		</li>
		<li><A HREF="directions.php">Contact</a>
			<ul>
			<li><A HREF="prayer_requests.php">Prayer Requests</a></li>
			<li><A HREF="directions.php">Map and Directions</a></li>
			</ul>
		</li>
		</ul>
		</div>
	</div>

Open in new window


Thanks so much for your time and willingness to share your expertise.
Screen-Shot-2014-02-14-at-4.56.5.png
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.