Hello folks. Having this issue with the black navigation bar background is about half the width of the page when viewing on tablet or phone. Works fine in desktop otherwise.www.logicweb.com
Your help is appreciated.
?>><ahref=“/other-services/which-web-host.php”><spanstyle="margin-left:405px">You want IT. We got IT.</a><spanstyle="font-size:8px;margin-top:13px;color:#B9B9B9;margin-left:-8px;float:right">SM</span></span></li>
</ul>
</div>
<divclass=“clear-both”></div>
</nav>
</header>
Please see attached to know what I’m referring to. Still not able to figure this out. Thanks.
Inside your <nav> there is a <div class=“wrapper”>
[COLOR=#434343][FONT=helvetica]
[/FONT][/COLOR][COLOR=#434343][FONT=helvetica]
[/FONT][/COLOR]
.wrapper {
margin: 0 auto;
max-width: 1300px;
min-width: 960px; /* bad start for a responsive design */
padding: 0 40px;
}
[COLOR=#434343][FONT=helvetica]
[/FONT][/COLOR]I tried a few variations but none work. I removed the div wrapper from the <nav>. I then tried adding style=“margin: auto” to the <ul>. I also tried adding it to the <nav>, none of this worked as they all resulted in a left aligned menu.
You have other sections set to width: 960px, but you have 40px padding on each side too, meaning that the real width is 1040px, so you need to take that into account with all your measurements.
Thanks. Still the exact same. I’m baffled. Never had so much confusion using CSS before.
The desktop was always working by the way, it’s specifically mobile (phones) and tablets that it does not render right. The screenshots shows an example.
Actually that did work! I tested it in Chrome on my iPhone, works thank you very much.
I do have one last small problem and appreciate your effort here. The slogan on the right in that same black bar, its getting forced to a new line below only on mobile/tablet browsers. I tried adding a float:right condition, that didn’t fix it.
This won’t settle things, but I notice that you’ve added min-width: 1040px to elements on which you also have left/right padding of 40px, so you are chasing your tail here. Make the max width 960px on elements that have the side padding.
My perception was that you had a width of 960px on quite a few sections, but on some you had left/right padding of 40px, too, so there was a mismatch between the sections with and those without padding. My suggestion was to increase the width of any sections without padding to 1040px so that their widths would all match. I made a silly mistake in quoting one that also had padding on it—can’t believe I didn’t see that! O well, sorry.
The complex nesting of elements on the page makes it tricky to debug, TBH. It would be better to have an outer wrapper for each section (or visual band of color, if you will), width: 100%, and then an inner wrapper for each section set to width: 960px and centered. Then all the content in those inner wrappers will have a consisten width to fit into. Here is a basic example of what I mean: http://pageaffairs.com/code-archive/full-width-bands/floated-columns.html
The attached code will help you demonstrate / play and see what it happening. Diddle with the width and padding values and see what happens.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Full Width Background Color</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="en-us">
<style type="text/css">
body {
padding:0;
margin:0;
}
.outer {
background-color:#abc;
min-width:760px;
padding:40px;
}
.inner {
background-color:#cba;
width:800px;
padding:1px 20px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>
</div>
</body>
</html>
Thanks guys but I’m still not sure how to go about correcting this issue, even with the sample code. The original coder/designer did not complete the project and I was left to do so.