Как сделать мой макет более отзывчивым?

Хорошо, ребята, я очень хорошо это сделал, но есть несколько причуд! Я пробовал все, и он выглядит отлично/хорошо, как отзывчивый сайт, но есть некоторые проблемы. Я не могу получить раздел .therapy, чтобы посмотреть, как я его хочу. Полная страница обнимает левое поле, но выглядит хорошо с моими медиа-запросами. Мой вопрос заключается в том, как заставить его хорошо выглядеть на полной странице и быть отзывчивым. Спасибо и объятия. Я бы хотел, чтобы поля располагались в нескольких пикселях и выглядели так, будто они не используют все свободное пространство. пожалуйста помоги.Как сделать мой макет более отзывчивым?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Home</title> 
    <link rel="stylesheet" href="something.css" type="text/css"/> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <!--[if lt IE 9]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 

<style> 
body{ 
    background-color: #f1f0d1; 
    font-family: Verdana, Tahoma, Arial, sans-serif; 
    font-size: 1.125em; 
    overflow: auto; 
} 
h1, h2, h3{ 
    text-align: center; 
    padding-left: 5%; 
    color: #878e63; 
} 
p{ 
    padding: 2%; 
    color: #878e63; 
} 
img{ 
    text-align: center; 
    max-width: 100%; 
    height: auto; 
    width: auto; 
} 

#wrapper { 
    margin: 0 auto; 
    max-width: 1020px; 
    width: 98%; 
    background-color: #fefbe8; 
    border: 1px solid #878e63; 
    border-radius: 2px; 
    box-shadow: 0 0 10px 0px; 
    overflow: hidden; 
} 
#callout { 
    width: 100%; 
    height: auto; 
    background-color: #878e63; 
    overflow: hidden; 
} 
#callout p { 
    text-align: right; 
    font-size: 13px; 
    padding: 0.1% 5% 0 0; 
    color: #f1f0d1; 
} 
#callout p a { 
    color: #f1f0d1; 
    text-decoration: none; 
} 
header { 
    width: 96% 
    min-height: 125px; 
    padding: 5px; 
    text-align: center; 
} 
nav ul { 
    list-style-type: none; 
    margin: 0; 
    padding-left: 90px; 
} 
nav ul li { 
    float: left; 
    border: 1px solid #878e63; 
    width: 15%; 
} 
nav ul li a { 
    background-color: #f1f0d1; 
    display: block; 
    padding: 5% 12%; 
    font-weight: bold; 
    font-size: 18px; 
    color: #878e63; 
    text-decoration: none; 
    text-align: center; 
} 
nav ul li a:hover, nav ul li.active a { 
    background-color: #878e63; 
    color: #f1f0d1; 
} 
.banner img { 
    width: 100%; 
    border-top: 1px solid #878e63; 
    border-bottom: 1px solid #878e63; 
} 
.clearfix{ 
    clear: both; 
} 
.left-col { 
    width: 55%; 
    float: left; 
    margin: 1% 1% 1%; 
} 
.sidebar: { 
    width: 40%; 
    float: right; 
    margin: 1%; 
    text-align: center; 
} 
.therapy { 
    /*float: left;*/ 
    margin: 0 auto; 
    width: 100%; 
    height: auto; 
    /*padding: 1%;*/ 
} 
.section{ 
    width: 29%; 
    float: left; 
    margin: 2% 2%; 
    text-align: center; 
} 
footer{ 
    background-color: #878e63; 
    width: 100%; 
    overflow: hidden; 
} 
footer p, footer h3 { 
    color: #f1f0d1; 
} 
footer p a { 
    color: #f1f0d1; 
    text-decoration: none; 
} 
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
li { 
    display: inline; 
} 
ul li img { 
    height: 50px; 
} 

@media screen and (max-width: 480px) { 
    body{ 
     font-size: 13px; 
    } 
} 
@media screen and (max-width: 740px){ 
    nav { 
     width: 100%; 
     margin-bottom: 10px; 
    } 
    nav ul { 
     list-style-type: none; 
     margin: 0 auto; 
     padding-left: 0; 
    } 
    nav ul li { 
     text-align: center; 
     margin-left: 0 auto; 
     width: 100%; 
     border-top: 1px solid #878e63; 
     border-right: 0px solid #878e63; 
     border-bottom: 1px solid #878e63; 
     border-left: 0px solid #878e63; 
    } 
    nav ul li a{ 
     padding: 8px 0; 
     font-size: 16px; 
    } 
    .left-col, .sidebar, .section { 
     width: 100%; 
     float: left; 
     margin: 0; 
    } 
} 

</style> 
</head> 
<!-- redo all images on the page and style with css3--> 
<body> 
    <div id="wrapper"> 
     <div id="callout"> 
      <p>Call us at <strong>727-555-5555</strong></p> 
     </div><!--end callout div--> 
     <header> 
      <!--need ne image--><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/massagelogo.png" alt="Massage" title="Massage by ?"></a> 
     </header> 

     <nav> 
      <ul> 
       <li class="active"><a href="#">Home</a></li> 
      <!--make active later--><li><a href="#">Contact</a></li> 
      <!--make active later--><li><a href="#">Pricing</a></li> 
      <!--make active later--><li><a href="#">Specials</a></li> 
      <!--make active later--><li><a href="#">Consult</a></li> 
      <!--make active later--><li><a href="#">Consult</a></li> 
      </ul> 
      <div class="clearfix"></div> 
     </nav> 
      <div class="banner"> 
       <img src="http://www.w3newbie.com/wp-content/uploads/massagebanner.png" alt="need new" title="new"> 
      </div><!--close banner--> 
      <!--fix w css--><center><img src="http://www.w3newbie.com/wp-content/uploads/three_sayings.png" alt="need new" title="new"></center> 
      <section class="left-col"> 
       <!--use h2 tag and css--><p style="text-indent: 50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie pellentesque at convallis eros. Ut luctus ex eget tempor scelerisque. Praesent blandit velit eu turpis aliquam pellentesque. Cras vel erat eget ligula sollicitudin commodo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie pellentesque at</p> 
       <p style="text-indent: 50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie pellentesque at convallis eros. Ut luctus ex eget tempor scelerisque.</p> 
      </section> 
      <aside class="sidebar"> 
       <div class="therapy"> 
       <img src="http://www.w3newbie.com/wp-content/uploads/therapist.jpg" alt="need new" title="new"> 
       </div><!--close therapy div--> 
      </aside> 

     <div class="section"> 
      <h3>Text Text Text Text</h3> 
      <img src="http://www.w3newbie.com/wp-content/uploads/private.png" alt="need new" title="new"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risus In non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie</p> 
      </div><!--close section div--> 
      <div class="section"> 
      <h3>Text Text Text Text</h3> 
      <img src="http://www.w3newbie.com/wp-content/uploads/sauna-steam.png" alt="need new" title="new"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risusIn non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie</p> 
      </div><!--close section div--> 
      <div class="section"> 
      <h3>Text Text Text Text</h3> 
      <img src="http://www.w3newbie.com/wp-content/uploads/retreat.png" alt="need new" title="new"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risusIn non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie</p> 
     </div><!--close section div--> 
     <!--fix w h2 and css --><center><img src="http://www.w3newbie.com/wp-content/uploads/ease.png" alt="need new" title="new"></center> 

     <footer> 
      <div class="section"> 
       <p>Text Text Text</p> 
       <p><strong>727-555-5555</strong><br> 
       123 Main St<br> 
       Anywhere, FL 33770<br> 
       [email protected]</p> 
      </div> 
      <div class="section"> 
       <p>Connect with us!</p> 
       <ul> 
        <li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/facebook1.png" alt="need new" title="new"></a></li> 
        <li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/googleplus.png" alt="need new" title="new"></a></li> 
        <li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/twitter1.png" alt="need new" title="new"></a></li> 
        <li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/youtube1.png" alt="need new" title="new"></a></li> 

       </ul> 

      </div> 
      <div class="section"> 
       <img src="http://www.w3newbie.com/wp-content/uploads/plant.png" alt="need new" title="new"> 
      </div> 
     </footer> 
    </div><!--end wrapper div--> 
     <p>&copy; 2014.</p><!--margin 0 auto this--> 

</body> 

</html>

Я знаю, что много, но я застрял, я думаю, что моя математика выключена. Пожалуйста, сообщите мне, как я могу решить и поблагодарить вас.

источник

2014-12-13 hellgirl

Почему не использовать рамки и сэкономить время и нервы :), например, Bootstrap. –

Просьба посмотреть в jsfiddle или jsbin – hellgirl

Я знаю, что это то, что я просматриваю, но имею немного неприятностей. Пожалуйста, любая помощь «желательна» – hellgirl

Если вы хотите улучшить использование пробелов, сначала вам нужно сделать концепцию. Например, ваш текст в настоящее время находится над огромным изображением. Унтер этого огромного изображения есть три меньших ящика.

Таким образом, вы можете сказать, что на полном экране вы хотите, чтобы изображение и текст были рядом друг с другом. Это делается путем добавления следующего на запрос СМИ вы хотите, чтобы текст и изображение появится рядом друг с другом:

aside.sidebar { 
width: 40%; 
float: right; 
margin-right: 2%; 
margin-top: 30px; 
}

Затем вам нужно вставить

<div style="clear: both;"></div>

Ниже закрытия </aside> тега! Вы вставили что-то подобное для своей боковой панели в строке 106 с .sidebar:, что является «сломанным кодом» из-за : после вашего класса css.

Это довольно простой пример, но работает для всех типов страниц. Если вам нужны дополнительные объяснения, не стесняйтесь спрашивать, это копия «быстрой помощи» &.

С уважением, Мариан.

источник

2014-12-13 10:14:32

Я нашел опечатку (двоеточие) ненужным:

.sidebar: {   /*here*/ 
 
    width: 40%; 
 
    float: right; 
 
    margin: 1%; 
 
    text-align: center; 
 
}

источник

2014-12-13 10:14:49

Как сделать мой макет более отзывчивым?

ответ

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