0

I'm having trouble with a website I'm working on. This is the website here. The top navigation bar is not okay at mobile/tablet view. It's okay at desktop only. See the image of mobile view:

I don't want to make it responsive but from mobile or tablet it should be same layout with scrooling. There is no problem at the code for navigation. The problem is about the div who holde the navigation. Because if I remove the navigation and use just text, it'll have same problem:

The HTML code of the div:

<div class="outer top">
    <div class="inner">
        <div class="nav">
            <ul>
                <li>....</li>
                <li>....</li>
                <li>....</li>
            </ul>
        </div>
    </div>
</div>

The CSS code:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0 none;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

body {
    background: url(../images/bg.png) repeat-x #fff;
    color: #fff;
    font-family: Helvetica, Myriad Pro, Verdana;
    font-size: 14px;
    line-height: 1em;
}

.outer {
    width: 100%;
    float: right;
    display: block;
}

.top {
    background: #004481;    
}

.inner {
    width: 940px;
margin: 0 auto;
}

I've used width 100%. But, still it's not okay at mobile/tablet. Can you please give me a solution...

Jacob Tomlinson
  • 3,341
  • 2
  • 31
  • 62
user1896653
  • 3,247
  • 14
  • 49
  • 93
  • 1
    Your inner class has a hard width of 940px this will hold on a tablet/mobile device. Why not use responsive design like [Twitter bootstrap](http://twitter.github.com/bootstrap/examples.html) – Jordy van Eijk Mar 12 '13 at 13:54
  • well, I've another div under the inner named "wrapper". .wrapper { margin: 0 auto; text-align: left; width: 940px; } But, it won't create any problem from mobile device. Yes, twitter bootstrap is useful. But, I've to expert without framework at first. – user1896653 Mar 12 '13 at 14:00
  • I just took a look on my Galaxy Note2 but the site looks fine. – Jordy van Eijk Mar 12 '13 at 14:50

2 Answers2

0

I put your code in jsbin, and wasn't able to see what you're seeing. Can you add more code?

http://jsbin.com/ologix/1/edit

Fred
  • 1,344
  • 1
  • 11
  • 16
  • Actually, I don't know how to code at there. That's why, I'm giving you the full code download link: https://www.dropbox.com/s/phup4sok648c9sw/fysion.zip – user1896653 Mar 12 '13 at 14:12
0

You could also consider to create a new stylesheet specific for your mobile/tablet devices. This makes sure that it will look right on all devices. You're already using Divs so that shouldn't be a problem.

Jordy van Eijk
  • 2,718
  • 2
  • 19
  • 37
  • How's the CSS code for the inner div for mobile/tablet device? – user1896653 Mar 12 '13 at 14:27
  • not specific for that div but completly new CSS for tablet/mobile – Jordy van Eijk Mar 12 '13 at 14:43
  • well, this website: http://www.cssluxury.com/vivi_wp/ is also a full-width website. At that website, there aren't stylesheet for mobile/tablet. How's that website still okay at mobile/tablet? there are .wrapper(instead of that I used .inner) at that website: .wrapper { width: 960px; margin: 0 auto; } Look, I ain't talking about responsive layout. I want just same layout on mobile, doesn't matter to look same layout by scrolling from mobile or tablet, just I want same layout – user1896653 Mar 12 '13 at 15:20