Solved

How can I fix this?

Posted on 2014-02-13
4
218 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 53

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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Using Specialized Fonts in CSS 1 61
Make footer stick to bottom 6 39
Fix Form size HTML 16 40
HTML or/and CSS codes to construct numbered paragraphs. 5 36
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

751 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