Ivan Ivan - 2 months ago 13
HTML Question

Why is the text pushing down the picture?

I'm working on responsiveness for a website and for some reason the "Photo Editing" text is pushing the cat photo down. I want all the text to be to the left and allowing the photos to stack down nicely. To see the problem PLEASE view this website at 600px width viewport!!! View website here https://ivanbarr.github.io/photostory/

<body>
<div class="wrapper">
<!--NAV-->
<nav>
<div class="menu-icon">
<img src="images/menu-icon.png">
</div>
<img class="logo" src="images/logo.png" alt="Photobook">
<img class="share" src="images/share.png">
<div class="phone">
+11 258 364 1767
</div>
</nav>
<!--MENU-->
<div class="menu">
<ul>
<li><a href="#advantage">Why PhotoBook?</a></li>
<li><a href="#photobooks">PhotoBooks</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#terms">Terms</a></li>
</ul>
</div>

<!--Banner-->
<div class="banner">
<h1>CREATE YOUR OWN<br/> PHOTOSTORY</h1>
<h3>Make your photobook online</h3>
<div class="button">MAKE YOUR PHOTOBOOK</div>
</div><!--button-->

<div class="steps"><!--Steps-->
<div class="circles">
<div class="cloud circle">
</div><!--Cloud-->
<div class="dashed-line">
</div>
<div class="screen circle">
</div><!--Screen-->
<div class="dashed-line">
</div>
<div class="hand circle">
</div><!--Hand-->
<div class="dashed-line">
</div>
<div class="hand-truck circle">
</div><!--Hand Truck-->
</div><!--circles-->

<div class="captions">
<p>Download<br/>photos</p>
<p>Design your<br/>photobook</p>
<p>Pay<br/>for service</p>
<p class="margin-fix">Get your<br/>photobook</p>
</div>
</div><!--Steps-->

<!--Advantage-->
<div class="advantage">
<a name="advantage"></a>
<h1>ADVANTAGE</h1>
<div class="adv-desc">
<h3>Import photos <br/>from your social networks</h3>
<p>Lorem ipsum dolor sit amet, consectetur<br/> adipisicing elit, sed do eiusmod tempor<br/> incididunt modi tempora</p>
</div><!--adv-desc-->
<div class="social white-circle">
</div><!--Social-->

<div class="adv-desc">
<h3>Photo Editing</h3>
<p>Lorem ipsum dolor sit amet, consectetur <br/>adipisicing elit, sed do eiusmod tempor<br/> incididunt ut labore et dolore magna<br/> aliqua. Ora incidunt ut labore.</p>
</div><!--adv-desc-->
<div class="social">
<img src="images/cat.png">
</div><!--Social-->

<div class="adv-desc">
<h3>Templates</h3>
<p>Lorem ipsum dolor sit amet, consectetur<br/>adipisicing. Ut enim ad minim, nostrud<br/> exercitation ullamco laboris nisi ut<br/> aliquip ex commodo.</p>
</div><!--adv-desc-->
<div class="social">
<img src="images/templates.png">
</div><!--Social-->
<div class="make-your">
<p>MAKE YOUR PHOTOBOOK</p>
</div><!--make your photobook-->
</div><!--Advantage-->
<div class="ready-solutions">
<a name="photobooks"></a>
<h1>Ready<br/>Solutions</h1>

<div class="light-book">
<a name="lightbook"></a>
<h2>LightBook</h2>
<div class="content">
<ul>
<li>15x10 cm</li>
<li>12 pages</li>
<li>binding on the clip</li>
</ul>
<div class="price">
<h3>$129</h3>
</div><!--price-->
</div><!--content-->
<p>Make your LightBook</p>
</div><!--light-book-->

<div class="best-seller">
<p>BESTSELLER</p>
</div><!--Best-seller-->
<div class="classic-book">
<a name="classicbook"></a>
<h2>ClassicBook</h2>
<div class="content">
<ul>
<li>30x21 cm</li>
<li>36 pages</li>
<li>binding on the clip</li>
<li>fabric cover</li>
</ul>
<div class="price">
<h3>$239</h3>
</div><!--price-->
</div><!--content-->
<p>Make your ClassBook</p>
</div><!--classic-book-->
<div class="premium-book">
<a name="premiumbook"></a>
<h2>PremiumBook</h2>
<div class="content">
<ul>
<li>42x50 cm</li>
<li>50 pages</li>
<li>hardcover</li>
<li>leather cover</li>
<li>free shipping</li>
</ul>
<div class="price">
<h3>$759</h3>
</div><!--price-->
</div><!--content-->
<p>Make your PremiumBook</p>
</div><!--premium-book-->
</div><!--ready-solutoins-->
<div class="testimonials">
<a name="testimonials"></a>
<h1>TESTIMONIALS</h1>
<img class="profile-pic" src="images/profile-pic.png">
<div class="bio">
<h3>John Doe</h3>
<p>Wedding photographer</p>
</div><!--bio-->
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br/> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <br/>veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <br/>commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore<br/> eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,<br/> sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div><!--description-->
<div class="next-testimonial">
<p>Next testimonial</p>
<img src="images/arrow.png">
</div><!--Next Testimonial-->
<div class="button">MAKE YOUR PHOTOBOOK</div>
</div><!--button-->
</div><!--testimonials-->
<div class="info">
<a name="terms"></a>
<div class="box">
<div class="box-title">
<p>Terms</p>
</div><!--box-title-->
<div class="box-content">
<p>Lorem ipsum dolor sit amet, <br/>consectetur adipisicing elit, sed <br/>do eiusmod tempor.</p>
<p>Duis aute irure dolor in<br/> reprehenderit in voluptate velit <br/>esse cillum dolore eu fugiat <br/>nulla.</p>
</div><!--box-content-->
</div><!--box-->
<div class="box">
<div class="box-title">
<p>Payment</p>
</div><!--box-title-->
<div class="box-content payment">
<p>Payment methods:</p>
<ul>
<li>VISA</li>
<li>MasterCard</li>
<li>PayPal</li>
<li class="margin-bottom">American Express</li>
</ul>
</div><!--box-content-->
</div><!--box-->
<div class="box">
<div class="box-title">
<p>Shipping</p>
</div><!--box-title-->
<div class="box-content margin-bottom">
<p>Lorem ipsum dolor sit amet,<br/> consectetur adipisicing elit, sed<br/> do eiusmod tempor incididunt ut<br/> labore et dolore magna aliqua.</p>
<p>Free shipping for<br/> PremiumBook</p>
</div><!--box-content-->
</div><!--box-->
<div class="make-your button-info">
<p>MAKE YOUR PHOTOBOOK</p>
</div><!--make your photobook-->
</div><!--info-->
<footer>
<div class="nav-wrapper">
<div class="nav nav-1">
<ul>
<li>About us</li>
<li>Careers</li>
<li>Help</li>
<li>Press</li>
</ul>
</div><!--nav 1-->
<div class="nav nav-2">
<ul>
<li><a href="#terms">Terms</a></li>
<li><a href="#terms">Payment</a></li>
<li><a href="#terms">Shipping</a></li>
<li>Contact</li>
</ul>
</div><!--nav 1-->
<div class="nav nav-3">
<ul>
<li><a href="#lightbook">LightBook</a></li>
<li><a href="#classicbook">ClassicBook</a></li>
<li><a href="#premiumbook">PremiumBook</a></li>
</ul>
</div><!--nav 1-->
<div class="nav social-footer">
<img src="images/facebook.jpg">
<img src="images/blogger.jpg">
<img src="images/instagram.jpg">
<img class="asanov" src="images/asanov.png">
</div><!--nav 1-->
</div><!--nav wrapper-->
<p class="copyright">&copy;IvanBar 2016</p>
</footer>
</div><!--wrapper-->
<script type="text/javascript" src="javascript/jquery-3.1.0.js"></script>
<script type="text/javascript" src="javascript/javascript.js"></script>
</body>
</html>


Styling for mobile version

/* NAV */
.wrapper{
overflow: hidden;
}
nav{
max-width: 1520px;
background-color: #ffffff;
overflow: hidden;
}

.menu-icon{
display: inline-block;
padding: 15px 15px 10px 15px;
cursor: pointer;
}

.logo{

}

.share{
float: right;
padding: 10px;

}

.phone{
display: none;
}

/* MENU */

.menu{
text-align: center;
line-height: 35px;
height: 145px;
display: none;
}

.menu li{
list-style-type: none;
}

.menu li:hover{
border: solid black 1px;
margin-bottom: -1px;
}

.menu li a{
text-decoration: none;
}
.menu li a:visited{
color: black;
}

/* Banner */

.banner{
background-image: url("../images/banner-bg.jpg");
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
text-align: center;
height: 220px;
}

.banner h1{
padding: 15px 0 20px 0;
font-family: 'Alegreya Sans', sans-serif;
font-weight: lighter;
letter-spacing: 2px;
line-height: 25px;
font-size: 1.4em;
}

.banner h3{
display: none;
}

.button{
border: solid black 1px;
background: transparent;
width: 200px;
padding: 10px;
margin: 0 auto;
border-radius: 6px;
font-family: 'Open Sans', sans-serif;
font-size: .90em;
cursor: pointer;
}

.button:hover{
text-decoration: underline;
}

/* STEPS */

.cloud{
background-image: url("../images/cloud.png");
}

.screen{
background-image: url("../images/screen.png");
}

.hand{
background-image: url("../images/hand.png");
}

.hand-truck{
background-image: url("../images/hand-truck.png");
}
.circles{
width: 140px;
float: right;
margin-right: 10px;
margin-top: 30px;
}
.circle{
width: 130px;
height: 130px;
border-radius: 100px;
background-color: white;
background-repeat:no-repeat;
-webkit-background-size: 50%;
-moz-background-size: 50%;
-o-background-size: 50%;
background-size: 50%;
background-position: center;
border: solid #ffd200 5px;

}

.captions{
width: 160px;
}

.captions p{
margin-bottom: 150px;
display: block;
position: relative;
top: 70px;
font-family: 'Alegreya Sans', sans-serif;
font-weight: lighter;
text-align: center;
font-size: 1.3em;
}

.dashed-line{
width: 0;
height: 40px;
border: solid #ffd200 2px;
border-style: dashed;
margin: 0 auto;
}

/* Advantage */

.advantage{
background-color: #f3f0e7;
}

.advantage h1{
text-align: center;
font-family: 'Alegreya Sans', sans-serif;
font-weight: lighter;
padding-top: 20px;
padding-bottom: 40px;
font-size: 1.5em;
letter-spacing: 10px;
}

.white-circle{
height: 267px;
width: 267px;
border-radius: 133px;
background-color: white;
background-image: url("../images/social.png");
background-repeat:no-repeat;
-webkit-background-size: 50%;
-moz-background-size: 50%;
-o-background-size: 50%;
background-size: 80%;
background-position: center;
}
.social img{
display: block;
margin: 0 auto;
}
.social{
margin: 0 auto;
margin-bottom: 30px;
}
.advantage{
overflow: hidden;
}
.advantage h3{
text-align: center;
font-family: 'Alegreya Sans', sans-serif;
font-weight: lighter;
font-size: 1.5em;
}

.advantage p{
text-align: center;
margin-top: 15px;
margin-bottom: 15px;
font-family: 'Open Sans', sans-serif;
font-weight: lighter;
font-size: 0.8em;
line-height: 18px;
color: #8c8c8c;
}

.make-your{
width: 240px;
background-color: #e11a27;
border-radius: 10px;
margin: 0 auto;
cursor: pointer;
}
.make-your:hover{
background-color: #a0131c;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}

.make-your p{
font-size: 0.8em;
font-family: 'Open Sans', sans-serif;
color: white;
padding: 15px;
text-align: center;
}

/* Ready Solutions */

.ready-solutions h1{
text-align: center;
font-family: 'Alegreya Sans', sans-serif;
font-weight: lighter;
padding-top: 20px;
padding-bottom: 20px;
font-size: 1.7em;
letter-spacing: 10px;
line-height: 30px;
}
.light-book, .classic-book, .premium-book{
width: 280px;
height: 400px;
background-color: #ffd200;
margin: 30px auto;
border-radius: 10px;
}

.light-book{
margin-bottom: 18px;
}

.classic-book{
margin-top: 0;
}

.best-seller{
width: 150px;
margin: 0 auto;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 25px solid #ffd200;;
}

.ready-solutions p{
text-align: center;
font-family: 'Alegreya Sans', sans-serif;
font-weight: lighter;
font-size: 1.5em;
padding-top: 15px;
}

.best-seller p{
text-align: center;
position: relative;
bottom: -25px;
color: #e11a27;
font-weight: bold;
font-size: 1.1em;
font-family: 'Ropa Sans', sans-serif;
letter-spacing: 4px;

}

.ready-solutions h2{
text-align: center;
font-family: 'Open Sans', sans-serif;
font-size: 2em;
font-weight: lighter;
padding-top: 35px;
}

.content{
width: 250px;
height: 240px;
background-color: white;
margin: 0 auto;
margin-top: 40px;
position: relative;
}

.content ul{
padding: 10px 0 0 15px;
}

.content li{
padding-bottom: 10px;
padding-left: 30px;
list-style: none;
background-image: url("../images/check.png");
background-repeat: no-repeat;
background-position: left center;
}

.price h3{
line-height: 100px;
text-align: center;
font-size: 3em;
font-family: 'Open Sans', sans-serif;
font-weight: lighter;
}

.price{
width: 252px;
height: 100px;
position: absolute;
bottom: 0;
}

/* Testimonials */

.testimonials{
background-color: #f7f0e6;
overflow: hidden;
}

.testimonials h1{
text-align: center;
font-family: 'Alegreya Sans', sans-serif;
font-weight: lighter;
padding-top: 20px;
padding-bottom: 40px;
font-size: 1.5em;
letter-spacing: 10px;
}

.profile-pic{
display: inline-block;
width: 140px;
height: 140px;
padding-left: 5px;
padding-bottom: 20px;
}

.bio{
float: right;
font-family: 'Alegreya Sans', sans-serif;
padding-top: 50px;
margin-right: 15px;
}

.bio p{
font-size: .9em;
}

.bio h3{
font-size: 1.7em;
font-weight: lighter;
}

.description{
overflow: hidden;
}

.description p{
float: left;
padding: 0 10px 15px 15px;
font-family: 'Open Sans', sans-serif;
font-weight: lighter;
font-size: .9em;
line-height: 15px;
}

.button{
border: solid black 1px;
background: transparent;
width: 200px;
padding: 10px;
margin: 0 auto;
border-radius: 6px;
font-family: 'Open Sans', sans-serif;
font-size: .90em;
cursor: pointer;
text-align: center;
margin-bottom: 40px;
}

.next-testimonial{
padding-top: 20px;
}

.next-testimonial p{
text-align: center;
padding-bottom: 5px;
}

.next-testimonial img{
display: block;
margin: 0 auto;
padding-bottom: 30px;
}

/* Info */
.box{
width: 280px;
margin: 20px auto;
}
.box-title{
width: 280px;
background-color: #ffd200;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom: 8px solid white;
}

.box-title p{
text-align: center;
padding: 20px 20px;
font-size: 1.7em;
}

.box-content{
width: 280px;
background-color: #f7f0e6;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
overflow: hidden;
}

.box-content p{
padding: 15px;
}

.box-content p + p{
padding-bottom: 40px;
}

.margin-bottom, li.margin-bottom{
margin-bottom: 40px;
}

.button-info{
margin-bottom: 60px;
}

.payment ul{
padding-left: 40px;
}

.payment li{
padding-bottom: 10px;
}

.margin-bottom p + p{
color: #e11a27;
font-weight: bold;
font-family: 'Open Sans', sans-serif;
font-size: .8em;
line-height: 15px;
}

.margin-bottom p{
padding-bottom: 5px;
}

/* Footer */

footer{
background-color: #ffd200;
overflow: hidden;
}

.nav-wrapper{
width: 90%;
margin: 0 auto;
overflow: hidden;
}

.nav{
width: 40%;
border-top: solid black 1px;
float: left;
margin-top: 30px;
margin-left: 4%;
margin-right: 4%;
}

.nav li{
padding-top: 10px;
list-style: none;
}

.nav li:hover{
text-decoration: underline;
}
.nav li a{
text-decoration: none;
}

.nav li a:visited{
color: black;
}

.nav img{
padding-top: 10px;
list-style: none;
cursor: pointer;
padding-bottom: 20px;
}

.social-footer{
width: 40%;
}
.copyright{
text-align: center;
padding-bottom: 10px;
width: 100%;
}


Styling for tablet (600px width)

@media only screen
and (min-width: 370px){
/* steps */
.circles{
margin-right: 20px;
}

/* testimonials */
.profile-pic{
padding-left: 15px;
}

.bio{
margin-right: 30px;
}

}

@media only screen and (min-width: 600px){

/* banner */

.banner h1{
font-size: 1.6em;

}

.button{
width: 230px;
padding: 15px;
font-size: 1em;
}

/* steps */
.circles{
width: 90%;
padding-top: 70px;
margin-left: auto;
margin-right: auto;
float: none;
overflow: hidden;
margin-top: 0;
}

.circle{
width: 83px;
height: 83px;
float: left;
}

.dashed-line{
width: 45px;
height: 0;
float: left;
margin: 42.5px auto;
}

.captions{
width: 90%;
height: 150px;
margin: 0 auto;
}

.captions p{
display: inline-block;
margin-bottom: 0;
top: 20px;
margin-right: 45px;
margin-left: 5px;
}

p.margin-fix{
margin-right: 0;
}

/* advantage */
.adv-desc{
float: left;
margin-bottom: 100px;
margin-top: 50px;
}

.white-circle{
float: right;
width: 230px;
height: 230px;
}

.social{

}

.social img{
width: 230px;
height: 230px;
margin-right: 0;
}

.make-your{
/*top: 40px;*/
}

/* testimonials */
.bio{
padding-right: 100px;
}

.profile-pic{
padding-left: 150px;
}

.description{
width: 70%;
margin: 0 auto;
}
}

Answer

Try something like this

@media only screen and (min-width: 600px)
.adv-desc {
    float: left;
    /* margin-bottom: 100px; */
    /* margin-top: 50px; */
    width: 300px;
}
.advantage {
    overflow: hidden;
    width: 600px;
    margin:0 auto;
}
.social {
    float: left;
    width: 300px;

}
.make-your {
   clear:both;
}
}

demo:https://jsfiddle.net/q6m8us0t/2/