SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    LogicWeb Hosting Site

    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.

    Code:

    • <header>
    • <divclass="wrapper">
    • <!-- LOGO -->
    • <ahref="http://www.logicweb.com"title="LogicWeb"class="logo"><imgsrc="/assets/img/logo.png"alt="LogicWeb"></a>
    • <!-- PARTNERS -->
    • <ahref="https://www.logicweb.com/affiliate"class="btn partners">AFFILIATES</a>
    • <!-- CLIENT LOGIN -->
    • <ahref="https://www.logicweb.com/billing/clientarea.php"class="btn client-login">CLIENT LOGIN</a>
    • <!-- LIVE CHAT -->
    • <ahref="javascript:void(0);"onclick="olark('api.box.expand')"class="btn live-chat">SALES CHAT</a>
    • <!-- PHONE NUMBER -->
    • <ahref="tel:18775644293"class="btn phone-header">1.877.LOGICWEB</a>
    • </div>
    • <divclass="clear-both"></div>
    • <nav>
    • <divclass="wrapper">
    • <!-- TOP NAV -->
    • <ul>
    • <li<?php
    • if($homePage ==1){
    • echo ' class="is-on"';
    • }
    • ?>><ahref="/"><span>HOME</span></a></li>
    • <li<?php
    • if(stristr($_SERVER["PHP_SELF"],"web-hosting")){
    • echo ' class="is-on"';
    • }
    • ?>><ahref="/web-hosting/"><span>WEB HOSTING</span></a></li>
    • <li<?php
    • if(stristr($_SERVER["PHP_SELF"],"resellers")){
    • echo ' class="is-on"';
    • }
    • ?>><ahref="/resellers/"><span>RESELLERS</span></a></li>
    • <li<?php
    • if(stristr($_SERVER["PHP_SELF"],"virtual-private-servers")){
    • echo ' class="is-on"';
    • }
    • ?>><ahref="/virtual-private-servers/"><span>VPS</span></a></li>
    • <li<?php
    • if(stristr($_SERVER["PHP_SELF"],"dedicated-servers")){
    • echo ' class="is-on"';
    • }
    • ?>><ahref="/dedicated-servers/"><span>DEDICATED SERVERS</span></a></li>
    • <li<?php
    • if(stristr($_SERVER["PHP_SELF"],"cloud-hosting")){
    • echo ' class="is-on"';
    • }
    • ?>><ahref="/cloud-hosting/"><span>CLOUD HOSTING</span></a></li>
    • <li<?php
    • if(stristr($_SERVER["PHP_SELF"],"other-services")){
    • echo ' class="is-on"';
    • }
    • ?>>
    • <ahref="/other-services/email-marketing.php"><span>OTHER SERVICES</span></a>
    • <div>
    • <?php include($_SERVER["DOCUMENT_ROOT"].'/other-services/inc/other-sub-nav.php');?>
    • </div>
    • <li<?php
    • if(stristr($_SERVER["PHP_SELF"],"")){
    • echo ' class="is-on"';
    • }
    • ?>><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.

    photo.PNG


    Someone elsewhere mentioned this:

    Inside your <nav> there is a <div class="wrapper">


    • .wrapper {
    • margin: 0 auto;
    • max-width: 1300px;
    • min-width: 960px; /* **bad start for a responsive design** */
    • padding: 0 40px;
    • }


    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.

    Thanks in advance.
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Try adding this to your CSS:

    Code:
    header {min-width: 1040px;}

  3. #3
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but that wasn't it unfortunately. This has baffled me and others that have tried to help so far. Very odd issue.
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by LogicWeb View Post
    Thanks, but that wasn't it unfortunately.
    Leave it in there, all the same, as it fixes issues on the desktop. Perhaps also change this:

    Code:
    .wrapper {
    max-width: 1300px;
    min-width: 960px;
    margin: 0 auto;
    padding: 0 40px;
    }
    to

    Code:
    .wrapper {
    max-width: 1300px;
    min-width: 1040px;
    margin: 0 auto;
    padding: 0 40px;
    }
    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.

  5. #5
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Delete this property:
    Code:
    style.css Line 16:
    .wrapper {
        padding:0 40px;
    }
    EDIT: Never mind. That does not seem to work, either. I was testing incorrectly. Sorry.

  7. #7
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  8. #8
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Odd, actually the first issue is not resolved. It did extend out, but not fully.

    Edit:

    Strange, this is what I noticed. The home page it now works fine in the header, but not the footer.

    The rest of the site, issue is still there top and bottom.
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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.

  10. #10
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    What do you mean? Your the one that suggested changing 960 to 1040 and removing the padding (40px) which I did.
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by LogicWeb View Post
    Your the one that suggested changing 960 to 1040 and removing the padding (40px) which I did.
    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/...d-columns.html

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    The attached code will help you demonstrate / play and see what it happening. Diddle with the width and padding values and see what happens.
    Code:
    <!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>

  13. #13
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  14. #14
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Give the following a try.

    This will fix the background colors on your page, but there's a caveat.

    styles.css, Line 16
    Add the BLUE padding property and change the min-width value:
    Code:
    .wrapper {
        margin: 0 auto;
        max-width: 1300px;
        min-width: 960px;
        padding:0 40px;    /* the page looks better with this padding :) */
    }
    virtual-private-servers
    Delete the RED inline property (and the stray semicolon, too):
    Code:
    <section>
        <div class="wrapper">
            <div class="page-copy" style="float:left; width:1220px;; margin-bottom:16px;">

    Expected "side effect" (the caveat):

    Because the forced width of div.page-copy has been deleted, the content in that box will wrap. The layout may need to be reconsidered.

    Note the inline width of the text box:

    <div style="width:740px; padding:0 15px 0 0; float:left;">

    The inline width of 740px may need to be reduced considerably or eliminated; thus, the redesign.

  15. #15
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure where that width:1220px;; is. I searched everywhere, can't find such a code.
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  16. #16
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    The URI, http://www.logicweb.com/ , is not responding ("taking too long to load" per Firefox).

  17. #17
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    The URI, http://www.logicweb.com/ , is not responding ("taking too long to load" per Firefox).
    Loads instantly here for me on east coast (US). Not sure why it's loading slow for you, but I'm accessing it external of the network.
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  18. #18
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    I'm at home in New Jersey.

    Code:
    Ping request could not find host http://www.logicweb.com/. Please check the name and try again.
    In fact, none of your signature links are responding, either.

    Who knows....

  19. #19
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by LogicWeb View Post
    I'm not sure where that width:1220px;; is. I searched everywhere, can't find such a code.
    Look at line 156 in the attached screen shot of the virtual-private-servers page.

    virtual-private-servers.jpg


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •