It's my first time posting on Stack Overflow so bear with me. I've been trying to make a design responsive and I've found a couple of irritating issues. I'll chuck a link to the page I'm talking about and if you're up for a challenge you can check it out: http://www.rattlingskeleton.tk/
The first one being how when re-sized at a certain resolution the text in the Chef section overlaps with the photograph of the chef. The second being as the browser window is resized the images on the review section become out of the line with each of their respected text boxes below.
I'll throw in all the CSS code relating to those parts:
/* 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;
}
Those are the CSS parts involved when the site is displayed on a desktop. Next up is the 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>
It would be great if someone could solve the problem and show me how they did it; they would have my respect. Good luck to anyone who would like to take a jab at it.
It appears your "medium" size picture doesn't have a set width or max width. The text next to the picture does have a set width at 48%. You used margin left 4% on the text but it's not enough because the element is trying to take up 48% of the parent.
The testimonial pictures are set to margin-left:55px. While the text columns are margin-left:0px. The testimonial images are not centered on full screen on my high resolution. I think the 55px may look centered on a smaller monitor at full screen.