Struggling to achieve a responsive layout with a dynamic background image, but still dealing with unwanted scrolling. I've experimented with overflow:hidden and different background properties without success.
<div class="wrap">
<div class="header">
<div class="logo-container">
<a href="#"></a>
</div>
<div class="nav-container">
<ul>
<li>
<span>
<img src="svg-icons/about-service.svg" alt="">
<a href="#">About BuyNow Service</a>
</span>
</li>
<li>
<span>
<img src="svg-icons/virt-cards.svg" alt="">
<a href="#">Virtual Discount Cards</a>
</span>
</li>
<li>
<span>
<img src="svg-icons/buy-now-pay-later.svg" alt="">
<a href="#">Buy Now, Pay Later</a>
</span>
</li>
</ul>
</div>
<div class="stores-container">
<a href="#" class="btn-app-store">
</a>
<a href="#" class="btn-google-play"></a>
</div>
</div>
</div>
<div class="content">
<div class="bg-content">
<div class="content-wrap">
<div class="content-left">
<div class="content-title">
<h1>Buy Now</h1>
</div>
<div class="description">
<span>Intelligent Shopping Service</span>
</div>
<div class="divider-container">
<div class="divider-long"></div>
<div class="divider-short"></div>
</div>
<ul>
<li>
<img src="svg-icons/round-icon-no-ads-white.svg" width="50" height="50" alt="">
<span>Provides attractive offers from various stores, based on your preferences</span>
</li>
<li>
<img src="svg-icons/round-icon-wallet-white.svg" width="50" height="50" alt="">
<span>Allows you to <a href="#">defer payment</a></span>
</li>
<li>
<img src="svg-icons/round-icon-profitable-offers-white.svg" width="50" height="50" alt="">
<span>No annoying ads</span>
</li>
</ul>
</div>
<div class="content-right">
<img src="img/phone.png" width="226" height="460" alt="">
</div>
</div>
</div>
</div>
<div>
<div class='container'>
<span class='pulse-button'>
<img src="img/orange-arrow-right.png" width="9" height="13" alt="">
</span>
</div>
</div>
<footer>
<div class="footer">
<div class="copyright">
<span>Ⓒ BuyNow, 2016. All rights reserved</span>
</div>
<div class="partners">
<img src="img/bag.png" alt="">
<a href="#">For Partners</a>
</div>
</div>
</footer>
CSS:
html {
overflow-x: hidden; }
.wrap {
margin: 0 auto;
max-width: 1024px; }
/* HEADER */
.header {
max-width: 1024px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 19px 20px; }
@media (max-width: 767px) {
.header {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; } }
@media (max-width: 767px) {
.header .logo-container {
margin: 0 auto 10px; } }
.header .logo-container a {
display: block;
width: 41px;
height: 41px;
background: url("../svg-icons/logo.svg");
background-size: 41px 41px; }
.header .logo-container a:hover {
opacity: .5;
-webkit-transition: .3s ease-out;
transition: .3s ease-out; }
.header .nav-container ul {
margin-left: 1px;
margin-top: 0px; }
.header .nav-container ul li {
float: left;
margin-right: 15px; }
@media (max-width: 767px) {
.header .nav-container ul li {
margin-bottom: 10px; } }
.header .nav-container ul li span img {
float: left;
margin-right: 4px;
opacity: .5; }
@media (max-width: 767px) {
.header .nav-container ul li span img {
margin-right: 10px; } }
.header .nav-container u...
I'm using three main blocks: wrap, content, and footer. Despite my efforts, the page still has an unwanted scroll bar. For reference, you can view the current look of the page here: