While working on a responsive website design, I encountered an issue that needs addressing.
Initially, switching from portrait mode to landscape didn't trigger the expected responsive behavior; instead, it simply zoomed into the site. To prevent this, I included the following viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
However, when the user switches back to portrait mode, a white space appears on the right side of the screen. A screenshot of this issue is provided below.
Here's an excerpt of the code pertaining to the container in question.
<div class="about">
<div class="container">
<div class="row">
<div class="span12">
<div class="headlines"><h1>Hello..</h1></div>
<div class="row">
<div class="span6">
<p>
[Content here]
</p>
<p>
[More content here]
</p>
</div>
<div class="span6">
<p>
[Additional content here]
</p>
</div>
</div>
<hr class="soften"/>
<div class="about-hire">
<h3 >Hello?</h3><a href="#" class="btn-about">Let's talk!</a>
</div>
</div>
</div>
</div>
</div>
Below is the snippet of CSS related to the above HTML structure.
.about {
text-align: center;
padding: 100px 0 100px 0;
background-color: #fff;
}
.about .container {
position: relative;
z-index: 9;
}
@media (max-width: 767px) {
.about {
margin-left: -20px;
margin-right: -20px;
}
.about .container {
margin-left: 20px;
margin-right: 20px;
}
}
I would appreciate any assistance or insights on how to resolve this issue effectively. Thank you in advance!