Header width not 100% with CSS and Viewport

I've tried the Viewport meta tag to fix this bug but I'm not so sure why it's occuring. Here's a screenshot of the problem:

Here's the viewport code I've tried:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Here's the CSS:

#header{
background: #afafaf url(images/complit/header.jpg) top left repeat-x;
text-align: left;
text-shadow: 0 1px 0 #ddd;
zoom: 1;
min-width: 100%;
}

#top{
height:5px;
background: #222;
}

.subhead{
width: 90%;
min-width: 1020px;
margin: 0 auto;
height:44px;
padding: 8px 0px;
zoom: 1;
}

#userbar{
background: transparent url(images/complit/userbar.png) top left repeat-x;
text-align: left;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
color: #858584;
text-shadow: 0 -1px 0 #000;
font-size: 12px;
}

Here's the header template:

            <div name="top" id="top"></div>
                <div id="header">
                    <div class="subhead">
                        <div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
                        <div class="top_menu">
                            <ul class="toplinks">
                                <div class="endsep"></div>
                                <li><a href="{$mybb->settings['homeurl']}"><i class="fa fa-home"></i> <strong>Home</strong><br /><span class="smalltext">CompLit Complice</span></a></li>
                                <li><a href="{$mybb->settings['bburl']}"><i class="fa fa-globe"></i> <strong>Forums</strong><br /><span class="smalltext">Get Involved</span></a></li>
                                <li><a href="{$mybb->settings['bburl']}/memberlist.php"><i class="fa fa-group"></i> <strong>Members</strong><br /><span class="smalltext">Our Board's Users</span></a></li>
                                <li><a href="{$mybb->settings['bburl']}/calendar.php"><i class="fa fa-calendar"></i> <strong>Calendar</strong><br /><span class="smalltext">Important Dates</span></a></li>
                                <li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><i class="fa fa-info-circle"></i> <strong>Help</strong><br /><span class="smalltext">Info & Resources</span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id="userbar">
                    <div class="subuserbar">
                        <div class="search">
                            <form action="search.php" method="post">
                                <form method="post" action="search.php">
            <input type="hidden" name="action" value="do_search" />
            <input type="hidden" name="postthread" value="1" />
            <input type="hidden" name="forums" value="all" />
            <input type="hidden" name="showresults" value="threads" />
            <input type="text" name="keywords" value="" placeholder="Type and hit enter..." class="searchbox" />
            </form>
                            </form>
                        </div>
                        {$welcomeblock}
                    </div>
                </div>
                <div id="container">
                    <hr class="hidden" />
                    <br class="clear" />
                    <div id="content">
                        {$pm_notice}
                        {$bannedwarning}
                        {$bbclosedwarning}
                        {$unreadreports}
                        {$pending_joinrequests}
                        <navigation>
                        <br />
                        {$board_messages}<br />

Thanks.

Here is a link: http://complit-complice.net/forums/index.php

Answers


Without a link to the site, we can only guess. But from the code you posted, it's likely to be the width you've set on .subhead, which is much wider that its container on small screens.

.subhead {
    min-width: 1020px;
}

EDIT: OK, with the link, I see what's happening. ry adding this to your style sheet:

#userbar, #header, #top {min-width: 1024px;}

Need Your Help

Good way to set/refresh information with thread in java swing app

java swing thread-safety swingworker concurrency

I'm not a Java programmer and I'm not sure if what I'm doing is correct or not, or if exist a better way to do this.

Python - Searching String In Text File

python

im new into python and i wanna do some searching string in txt file.