Это моя первая публикация на 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>
Было бы здорово, если бы кто-нибудь решил проблему и показал мне, как они это сделали; они будут иметь мое уважение. Удачи всем, кто хотел бы сделать удар в этом.
