1. дома
  2. Вопрос и ответ
  3. Почему текст нажимает на картинку?

Почему текст нажимает на картинку?

2016-09-14 5 views
0

Я работаю над отзывчивостью для веб-сайта, и по какой-то причине текст «Редактирование фотографий» толкает фотографию кота вниз. Я хочу, чтобы весь текст был слева и позволял фотографиям складываться красиво. Чтобы увидеть проблему, ПОЖАЛУЙСТА, просмотрите этот веб-сайт в окне просмотра ширины 600 пикселей !!! Просмотреть веб-сайт здесь 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 для мобильной версии

/* 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 для планшета (600px ширины)

@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; 
    } 
}

источник

2016-09-14 Anonymous

+0

вы можете предоставить jsfiddle – madalinivascu

+0

@madalinivascu https://jsfiddle.net/q6m8us0t/#&togetherjs=GVOOQNkKEz –

+0

вы можете предоставить изображение с ожидаемым поведением? – madalinivascu

ответ

0

Try что-то вроде этого

@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; 
} 
}

демо: https://jsfiddle.net/q6m8us0t/2/

источник

2016-09-14 04:39:24 madalinivascu

+0

Это исправило проблему ... но затем создало новую проблему. Почему кнопка «Сделать свою фотокнигу» растягивается полностью? –

+1

вам нужно '.make-your { clear: both; } ', чтобы очистить поплавок – madalinivascu

+1

, другое решение будет таким, как это https://jsfiddle.net/q6m8us0t/3/ i, я использовал содержимое преимущества в div с шириной 80% по центру и затем добавил 50% для текста и изображение, так что у вас есть фон с полной шириной страницы – madalinivascu

0

Проблема происходит из-за края, применяемых на adv-desc класса. Div, содержащий «Редактирование фотографий», попадает на нижний край div, который содержит «Импорт фотографий из вашей социальной сети». Второе изображение не будет вписываться в одну строку, чтобы оно опустилось. Вы можете попытаться уменьшить эти поля или изменить разметку, чтобы обернуть строки в содержащие div.

источник

2016-09-14 04:37:12 stevenelberger

0

Попробуйте уменьшить маржу .adv-desc.

@media only screen and (min-width: 600px){ 
.adv-desc { 
    float: left; 
    margin-bottom: 70px; 
    margin-top: 50px; 
} 
}

источник

2016-09-14 04:57:44 Sasith

Смежные вопросы

 Смежные вопросы