Solved

How can I fix this?

Posted on 2014-02-13
4
204 Views
Last Modified: 2014-02-15
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
0
Comment
Question by:brucegust
  • 2
4 Comments
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 150 total points
ID: 39855832
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39855893
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
 

Author Comment

by:brucegust
ID: 39858628
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
 
LVL 38

Accepted Solution

by:
Tom Beck earned 350 total points
ID: 39858886
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

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now