Container not showing 100% width mobile devices

  • Resolved dmontesi

    (@dmontesi)


    9 years, 10 months ago

    Hello there,

    I’ve been having an issue where my site displays just fine on every browser on my computer, but when I go to test it on an iPad or iPhone, the <div class=”container”> doesn’t display 100% width, however, the header and body tags are displaying 100% width.

    Here’s the code I’m using:

    I’m using the meta viewport like this on the header.php

    <head>
<meta name = “viewport” content = “initial-scale = 1.0″>
</head>
<header>
<span class="menu-trigger">Menu</span>
<nav class="site-nav primary-menu">
	<?php
		$args = array('theme_location' => 'primary');
			 wp_nav_menu(  $args );
	?>
</nav>
</header>
<div class="container">

My page.php looks like this:
<?php get_header(); ?>
	<article class="post page">
		 <div class="content-hold">
			<h2>Overview</h2>
			<?php the_content(); ?>
		</div>
	</article>
<?php get_footer(); ?>

And my footer.php
	<footer class="site-footer">
		<nav class="site-nav">
			<?php $args = array('theme_location' => 'footer');
                        wp_nav_menu(  $args ); ?>
		</nav>
	</footer>
</div><!--.container-->

Here's CSS. (I'm only putting the part of the code I think it's helpful):
@media (max-width: 979px) {

html, body {
	width: 100%;
}

.site-header {
  background: #fff;
  margin-bottom: 0px;
  padding: 0;
  width: 100%;
  height: 140px;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
}

.menu-trigger {
	display: block;
	background: #006ec3;
	color: #fff;
	padding: 14px;
	margin: 25px 0 0 0;
	text-transform: uppercase;
	text-align: right;
}

div.container {
	width: 100%;
	margin: 0 auto;
	position: relative;
} 

article.post, article.page {
	width: 100%;
	margin: 0 auto;
}

article-page .content-hold {
	width: 80%;
	margin: 0 auto;
}
}

    …
    }

    I’d really appreciate any help.

    Thanks a lot,
    Dan.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    If it’s a CSS issue then you need to link to a live and working (or broken) page with that issue.

    Thread Starter dmontesi

    (@dmontesi)

    Thanks Andrew, but just figured it out. It was a meta viewport issue.

    I didn’t have content=width=device-width together with initial scale.
    <meta name="viewport" content="width=device-width, initial-scale=1">

    For some reason I had tried it before, and didn’t work, but now it’s working just fine. Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Container not showing 100% width mobile devices’ is closed to new replies.