CODEWITHSUNDEEP
htmlcssresponsive-design
Атанас Иванов
Атанас Иванов

Reputation: 21

How to make my website responsive - Table text goes on top of each other

I have been struggling with my website, when it comes to making it responsive. I have a div section which contains a table (Awesome Clients) and when I shrink the browser the text goes on top of each other. That happens only on that section, so I need your help. I tried using media queries and I still can't figure it out. Can someone show me how to make everything responsive?

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>[email protected]</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>[email protected]</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>

Upvotes: 0

Views: 407

Answers (3)

Oliver
Oliver

Reputation: 3138

A number of the posts above will fix some of the layout issues you experience, but if you want to actually learn how to make responsive websites properly (rather than just plugging a few holes in this website in particular) then before anything else you should stop using tables for anything other than tabular data. You seem to be using the table tag above for general layout purposes, which really limits the overall adaptability, maintainability and optimisability of a website.

To created grid layouts, you should use div tags and CSS rather than tables, such that:

<table>
    <tr>
        <td>This is a grid item</td>
        <td>This is another one!</td>
    </tr>
</table>

Becomes:

<div class="column">
    <div class="row">This is a grid item</div>
    <div class="row">This is another one!</div>
</div>

And add in the CSS something like:

@media (min-width: 768px) {
    .column {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

Alternatively, if you need to support older browsers, you can float the rows instead of using the css float: left/right declaration. The CSS grid declaration is supported in all evergreen browsers, but fully not IE11 or below (IE10-11 has some support, but it's buggy as hell).

Of course, you can use CSS to make a table collapse, like so:

@media (max-width: 767px) {
    table {
        display: block;
    }
}

But that has a myriad of problems associated with it (especially for when optimising for screen-reader technology) and a number of bugs in various browsers.

In short, don't use tables for layouts - only use them for data is tabular (such as a table of ingredients). That is the biggest optimisation you can do to make your website actually responsive.

Upvotes: 0

Ari
Ari

Reputation: 418

nav {

padding:0 10px;
width: 100%;
height: 50px;
background-color: rgba(192,192,192,0.3);
margin: auto;
display: flex;
float: left;
justify-content: space-between;
align-items: center;

}

Here I made my version of your header/main JSFiddle

I hope this gives you a certain idea on how to make elements responsive. This example is just one way of doing it.

Upvotes: 0

John_ny
John_ny

Reputation: 807

I have checked with your code, i think that i have fixed ur issue. Add the below code in the style.css , if u face any issues comment it below.

.main p { display: inline-block;}

Upvotes: 1

Related Questions