html - 如何使我的网站响应式 - 表格文本相互重叠

Question

当涉及到响应时，我一直在为我的网站而苦苦挣扎。我有一个包含表格(Awesome Clients)的 div 部分，当我缩小浏览器时，文本会相互重叠。那只发生在那个部分，所以我需要你的帮助。我尝试使用媒体查询，但我仍然无法弄清楚。有人可以告诉我如何让一切都响应吗？

P.S I also need help with the header section and making it responsive, so if someone has ideas let me know.

body {
	margin: 0;
	padding: 0;
	background: radial-gradient(80% 40%, white, #cccccc);
}

header{
	overflow: hidden;
	height: 450px;
	display: block;
	margin: 0;
}

nav {
	width: 100%;
	height: 50px;
	background-color: rgba(192,192,192,0.3);
	margin: auto;
}


.wtf {
	padding-right: 50px;
	position: relative;
	bottom: 3px;
}

#logo {
	float: left;
	color: white;
	font-family: 'Concert One', cursive;
	padding-left: 20px;
}

p {
	margin: 0;
	padding: 0;
	text-align: center;
}

p.highlight {
	margin: 0;
	position: relative;
	bottom: 7px;
	cursor: pointer;
}

.learnMore {
	width: 13%;
	margin: 0 auto;
	cursor: pointer;
}

.learnMore h3:hover {
	background-color: #ddd;
  	color: black;
}

.learnMore h3 {
	border: 1px solid white;
	padding: 5% 15%;
}

ul {
	float:right;
}

li {
	display: inline;
	padding: 0 10px 0 10px;
	text-align: center;
}

a {
	text-decoration: none;
	color: white;
	font-size: 21px;
	margin: 0 0 3px 0;
	font-family: 'Montserrat', sans-serif;
	text-align: center;
}

li a:hover {
  background-color: #ddd;
  color: black;
}

.image {
	background-image: url('nebula-stars-universe-galaxy-space-4k-kx-1920x1080.jpg');
}

.main {
	width: 100%;
	height: 400px;
	color: white;
	text-align: justify;
	font-family: 'Montserrat', sans-serif;

}

.main p,h1,h3 {
	text-align: center;
	position: relative;
}

.main h1 {
	top: 100px;
	font-size: 50px;
}

.main h3 {
	top: 90px;
}

.main p {
	top: 90px;
	left: 210px;
	text-align: center;
	font-size: 20px;
}

.img1 {
	width: 210px;
	height: 210px;
	filter: opacity(50%);
	padding-left: 10px;
}

.img2 {
	width: 220px;
	height: 220px;
	filter: opacity(50%);
	padding-right: 10px;
}

.smallimg {
	width: 50px;
	height: 50px;
	border: 3px solid black;
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
	padding: 3px;
	color: black;
}

table {
	margin: 35px 27% 35px 27%;
	padding-bottom: 15px;
	padding-top: 15px;
	border-spacing: 15px;
}

.table1 {
	margin: 10px 26% 10px 26%;
	border-spacing: 5px;
}

td {
	color: #595959;
	font-size: 15px;
	font-family: 'Montserrat', sans-serif;
	text-align: center;
}

.theading {
	font-size: 40px;
	font-family: 'Yatra One', cursive;
	text-align: left;
}

.theading2 {
	font-size: 40px;
	font-family: 'Yatra One', cursive;
	text-align: right;
}

.alfaromeo {
	font-family: 'Rubik', sans-serif;
	font-size: 15px;
	text-align: center;
}

.opinions {
	width: 100%;
	height: 450px;
	background-color: rgba(255, 148, 77, 0.5);
}

.opinions h3 {
	color: snow;
	text-align: center;
}

.clients h1 {
	margin-top: 50px;
	padding-top: 40px;
	text-align: center;
	font-size: 35px;	
	font-family: 'Montserrat', sans-serif;
	text-shadow: 1px 1px 3px #000000;
	color: snow;
}

.clients h3 {
	text-align: center;
	bottom: 10px;
	font-size: 14px;	
	font-family: 'Montserrat', sans-serif;
}

.person1 {
	width: 100px;
	height: 100px;
	border: 1px solid grey;
	border-radius: 100%;
	margin-right: 20px;
	color: snow;
	overflow: hidden;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
}

.person2 {
	width: 100px;
	height: 100px;
	border: 1px solid grey;
	border-radius: 100%;
	margin-right: 20px;
	color: snow;
	overflow: hidden;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
}

.clientsTable {
	margin: 35px 27% 35px 27%;
	position: relative;
	padding-bottom: 5px;
}

.sayHello {
	width: 100%;
	height: 620px;
	background-color: #99ccff;
}

.sayHello div {
	margin: 0px 27% 0px 27%;
	padding-top: 40px;
}

.sayHello p {
	padding-top: 40px;
	color: snow;
	font-family: 'Montserrat', sans-serif;
	font-size: 50px;
}

.sayHello h3 {
	color: snow;
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	width: 65%;
	text-align: left;
	float: left;
}

.sayHello table {
	float: left;
	border-spacing: 20px;
	color: snow;
	position: relative;
	bottom: 20px;
	overflow: hidden;
}

.sayHelloTable img {
	width: 30px;
	height: 30px;
	border: 2px solid black;
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
	padding: 3px;
	background-color: snow;
}

.sayHelloTable td {
	color: snow;
}

.contactForm {
	border-radius: 7px;
  	background-color: snow;
  	padding: 20px;
  	float: right;
  	width: 200px;
  	height: 300px;
  	position: absolute;
  	left: 650px;
}

form {
	width: 180px;
	height: 350px;
}

input[type=text], select, textarea {
 	width: 100%;
  	padding: 12px;
  	border: 1px solid #ccc;
  	border-radius: 4px;
 	margin-top: 6px;
 	margin-bottom: 16px;
 	resize: none;
}

label {
    font: normal 12px 'Montserrat', sans-serif !important;
}

footer {
	position: absolute;
	color: white;
	text-align: center;
	width: 100%;
	height: 50px;
	background-color: rgba(153, 204, 255, 0.8);
	border-top: 1px solid snow;
}

.copyright {
	font-size: 20px;
	font-family: 'Concert One', cursive;
	text-align: center;
	margin: 0px 27% 0px 27%;
	padding-top: 10px;
}


/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
		
		.clientsTable {
			width: 60%;
			margin: 0 auto;
			position: relative;
			padding-bottom: 20%
		}

		.opinions {
			width: 100%;
			height: 450px;
			margin: 0 auto;
			position: relative;
}
}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

		.clientsTable td {
			width: 60%;
			margin: 0 auto;
			padding-bottom: 20%
		}
}

/* Landscape phones nad portrait tablets*/

@media (max-width: 767px) {
		.clientsTable {
			width: 60%;
			margin: 0 auto;
			padding-bottom: 20%
		}
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Упражнение</title>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Concert+One" rel="stylesheet">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/solid.css" integrity="sha384-+0VIRx+yz1WBcCTXBkVQYIBVNEFH1eP6Zknm16roZCyeNg2maWEpk/l/KsyFKs7G" crossorigin="anonymous">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/fontawesome.css" integrity="sha384-jLuaxTTBR42U2qJ/pm4JRouHkEDHkVqH0T1nyQXn1mZ7Snycpf6Rl25VBNthU4z0" crossorigin="anonymous">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Yatra+One" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
</head>

<body>

<header>
	<div class="image">
     <nav>
     	<div id="logo">
     	<h1><p class="highlight">A|Developing</p></h1>
    	</div>
    	
    	<div class="wtf">
    	<ul> 
    		<li class="current">
    			<a href="#">Home</a>
    		</li>
    		<li>
    			<a href="#">Services</a>
    		</li>
    		<li>
    			<a href="#">Clients</a>
    		</li>
    		<li>
				<a href="#">Team</a>
    		</li>
    		<li>
    			<a href="#">Contact</a>
    		</li>
    	</ul>
    	</div>
    </nav>
	
	<div class="main">
		<p>Can you build the website of my dreams?</p>
		<h1>YUP, WE CAN DO THAT.</h1>
		<section class="learnMore"><h3>Learn More</h3></section>
	</div>
	</div>
</header>

	<table align="center">
		<tr>
			<td class="theading"><font color="black">Web <b>Development</b></font></td>

		</tr>
		<tr>
			<td style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam lacus quis ex malesuada fermentum. Sed fringilla porttitor massa sit amet sollicitudin. Pellentesque posuere iaculis neque, sit amet convallis neque convallis quis.
		<br><br><br>
			Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
			<td><img class="img1" src="search.png" width="150" height="150" align="right"></td>
		</tr>
	</table>

	<table align="center"  class="table1">
		<tr>
			<td class="theading2" colspan="2"><font color="black">Identity <b>Branding</b></font></td>
		</tr>
		<tr>
			<td><img class="img2" src="wireless-connection-free-technology-icons-174546.png" width="150" height="150" align="right"></td>
			<td style="text-align: right;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam lacus quis ex malesuada fermentum. Sed fringilla porttitor massa sit amet sollicitudin. Pellentesque posuer  e iaculis neque, sit amet convallis neque convallis quis.
		<br><br><br>
			Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
		</tr>
		<br><br>
	</table>

	<table>
		<tr>
			<td rowspan="2"><img class="smallimg" src="businessman.png"></td>
			<td class="alfaromeo"><b>Branding & Identity</b></td>
			<td rowspan="2"><img class="smallimg" src="un-anniversaire-assez-remarqu--dans-le-monde-du-web-celui-des-20-ans--16.png"></td>
			<td class="alfaromeo"><b>Web & Graphic Design</b></td>
		</tr>
		<tr>
			<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
			<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.  
		</tr>

		<tr>
			<td rowspan="2"><img class="smallimg" src="Mobile-Smartphone-Tablet-icon.png"></td>
			<td class="alfaromeo"><b>Mobile App Development</b></td>
			<td rowspan="2"><img class="smallimg" src="005399d32e87304799aa0f1ae8f47159.png"></td>
			<td class="alfaromeo"><b>Animations</b></td>
		</tr>
		<tr>
			<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
			<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. 
		</tr>

		<tr>
			<td rowspan="2"><img class="smallimg" src="star-png-star-png-image-2156.png"></td>
			<td class="alfaromeo"><b>UI/UX</b></td>
			<td rowspan="2"><img class="smallimg" src="black-camera-logo-icon-download-4.png"></td>
			<td class="alfaromeo"><b>Photography</b></td>
		</tr>
		<tr>
			<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. 
			<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. 
		</tr>
	</table>

	<div class="opinions">
		<div class="clients">
			<h1>Awesome</font> <b>Clients</b></h1>
			<h3>See some nice things our clients said about us.</h3>
		</div>

		<table class="clientsTable" style="height: 50%;">
		<tr>
			<td style="width: 20%"><img class="person1" src="v9Y4ptj.jpg"></td>
			<td style="width: 60%"><font color="snow">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat.</font></td>
		</tr>

		<tr>
			<td colspan="2" style="width: 60%"><font color="snow">Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Aenean nec ullamcorper nisi, a sodales lorem.</font></td>
			<td style="width: 20%"><img class="person2" src="Mityo-Pishtova-01.jpg"></td>
		</tr>
		</table>
	</div>

	<div class="sayHello">
		<div>
		
			<p>Say <b>Hello</b></p>
			<br>
			<h3>Don't be shy, drop us an e-mail and say hello! We are a really nice 
				bunch of people. :)</h3>

		</div>

		<table class="sayHelloTable">
			<tr>
				<td><img src="phone.png"></td>
				<td>(416)555-0000</td>
				<td><img src="e-mail-logo.png"></td>
				<td>hello@adeveloping.com</td>
			</tr>

			<tr>
				<td><img src="twitter.png"></td>
				<td>@NAKATA</td>
				<td><img src="facebook.png"></td>
				<td>@NAKATA</td>
			</tr>

			<tr>
				<td><img src="80-google-plus-512.png"></td>
				<td>naskuuu123@gmail.com</td>
				<td><img src="pinterest-logo-E994F3A9FB-seeklogo.com.png"></td>
				<td>/NAKATA</td>
			</tr>
		</table>

		<div class="contactForm">
  			<form action="/action_page.php">
   			 	<label for="fname">First Name</label>
    			<input type="text" id="fname" name="firstname" placeholder="Your name..">

    			<label for="lname">Last Name</label>
    			<input type="text" id="lname" name="lastname" placeholder="Your last name..">

    			<label for="subject">Subject</label>
   				 <textarea id="subject" name="subject" placeholder="Write something.." style="height:50px"></textarea>

    			<input type="submit" value="Submit">
  			</form>
  			
		</div>
	</div>
	
	<footer>
		<p class="copyright">&copy; 2019 Made by Atanas Ivanov &diams; A|Developing</p>
	</footer>
</body>
</html>

Answer 1

我已经检查了你的代码，我想我已经解决了你的问题。在 style.css 中添加以下代码，如果您遇到任何问题，请在下方评论。

.main p { display: inline-block;}