Проблемы с выравниванием и перекрытием (Skeleton.css)

Question

Это моя первая публикация на Stack Overflow, так что несите меня. Я пытаюсь сделать отзывчивый дизайн, и я нашел пару раздражающих проблем. Я напишу ссылку на страницу, о которой я говорю, и если вы собираетесь на вызов, вы можете это проверить: http://www.rattlingskeleton.tk/

Первый из них - это то, как при изменении размера при определенном разрешении текст в раздел шеф-повара перекрывается фотографией шеф-повара. Второе, поскольку окно браузера изменено, изображения в разделе обзора становятся вне строки с каждым из их уважаемых текстовых полей ниже.

брошу во все CSS коде, касающуюся этих части:

/* Chef */ 

.chef { 
    margin: 40px; 
} 

#border { 
    border-style: solid; 
    border-width: 2px; 
    padding: 20px 20px 20px 20px; 
} 


/* Testimonials */ 

.testimonials { 
    margin-top: 50px; 
} 

.testimonials img { 
    border-radius: 50%; 
    height: 125px; 
    width: 125px; 
    margin-left: 55px; 
    margin-bottom: 27px; 
} 

.text { 
    text-align: center; 
    margin-bottom: 30px; 
} 

.newcontainer { 
    position: relative; 
    width: 65%; 
    max-width: 960px; 
    margin: 0 auto; 
    padding: 0 20px; 
    box-sizing: border-box; 
} 

Таковы CSS части, участвующие, когда сайт отображаются на рабочем столе. Далее идет HTML:

 <div class="chef"> 
     <div class="container" id="border"> 
     <div class="row"> 
      <div class="six columns"> 
      <img id="large" src="images/Jacques-Pauvert-biography.jpg"/> 
       <img id="medium" src="images/scaled.jpg"/> 
       <img id="small" src="images/cropped-chef.jpg"/> 
       </div> 
       <div class="six columns"> 
        <h1>THIS IS A CHEF</h1> 
        <p id="long">Lorem ipsum dolor sit amet, sonet fabulas apeirian an pri. Mea ex euripidis sententiae, nam ea aliquip contentiones. Duo dico probatus concludaturque an, eam ea soluta nostrum, assum putent cu qui. Etiam cetero ius in, no cibo putent suscipiantur est, facilis detracto nominati vel at. Recusabo consectetuer sit cu, esse inani no vis. Vim meliore electram mnesarchum ne, tacimates periculis necessitatibus id pro. Utamur vituperatoribus at sea, partem indoctum per ea. Soleat libris ne nec, cibo dissentiunt ea ius. Diam apeirian est te, vim cu alia suscipit tractatos. Lucilius dissentiunt ad pri, eu aliquid maluisset quo. Eum no consulatu conceptam. Vis cu labores graecis feugait.</p> 
        <p id="short">Lorem ipsum dolor sit amet, sonet fabulas apeirian an pri. Mea ex euripidis sententiae, nam ea aliquip contentiones. Duo dico probatus concludaturque an, eam ea soluta nostrum, assum putent cu qui. Etiam cetero ius in, no cibo putent suscipiantur est, facilis detracto nominati vel at. Recusabo consectetuer sit cu, esse inani no vis.</p> 
         <a class="button" id="about-left" href="#">READ MORE</a> 
         <center><a class="button" id="about-center" href="#">READ MORE</a></center> 
        </div>   
       </div> 
       </div> 
      </div> 


    <div class="testimonials"> 
    <div class="newcontainer"> 
    <div class="row"> 
     <div class="four columns"> 
     <img src="images/team1.jpg"/> 
      </div> 
      <div class="four columns"> 
      <img src="images/team2.jpg"/> 
       </div> 
       <div class="four columns"> 
        <img src="images/team3.jpg"/> 
        </div> 
         </div> 
         </div> 

          <div class="text"> 
          <div class="newcontainer"> 
          <div class="row"> 
          <div class="four columns"> 
           <p><strong>“Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.”</p> 
           </div> 
           <div class="four columns"> 
            <p><strong>“Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.”</p> 
            </div> 
             <div class="four columns"> 
             <p><strong>“Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.”</p> 
             </div> 
              </div> 
              </div> 
               </div> 
               </div> 

Было бы здорово, если бы кто-то мог бы решить эту проблему и показать мне, как они это сделали; они будут уважать меня. Удачи всем, кто хотел бы нанести удар.

Answer 1

1. Похоже, что ваш «средний» размер изображения не имеет установленной ширины или максимальной ширины. Текст рядом с изображением имеет ширину набора на 48%. Вы использовали маржу, оставшуюся 4% от текста, но этого недостаточно, потому что элемент пытается занять 48% от родителя.

2. Фотографии с условным обозначением установлены в левом крае: 55px. Хотя текстовые столбцы имеют margin-left: 0px. Образцовые изображения не сосредоточены в полноэкранном режиме на моем высоком разрешении. Я думаю, что 55 пикселей могут быть сосредоточены на меньшем мониторе на полном экране.

Answer 2

Для первой задачи попытаться изменить медиа-запрос для главного раздела от max-width: 975px до max-width: 1034px и от max-width: 550px к max-width: 730px

Для второго я не могу найти какие-либо проблемы с ним, если вы хотите, чтобы показать текст на экранах менее 960, попробуйте добавить код JS/css (media), относящийся к этому разделу, для лучшего просмотра.