------ HTML КОД ------
<!DOCTYPE html>
<html>
<head>
<title>********* ******** | Jr Developer</title>
<link rel="stylesheet" type="text/css" href="css/portfolioStyle.css">
</head>
<body >
<header id="nameAndContact">
<div class="container">
<h1>********* ********</h1>
<table>
<tr>
<th></th>
<td>Contact Information</td>
</tr>
<tr>
<th>Email:</th>
<td>mac************@*****.com</td>
</tr>
<tr>
<th>Phone:</th>
<td>***-***-****</td>
</tr>
</table>
</div>
</header>
<section id="selfTitleAndDesc">
<div class="container">
<h1>Full Stack Developer and Designer</h1>
<h2>I write functional and simple to understand code with a strong working knowledge of front and back-end services</h2>
</div>
</section>
</body>
</html>
-------- КОНЕЦ HTML КОД --------
-------- CSS КОД -------------
.container{
width:80%;
margin:auto;
overflow:hidden;
}
#nameAndContact h1{
float:auto;
width:70%;
padding:0;
text-align:center;
font-family:"Arial Black", Gadget, sans-serif;
font-size:40px;
box-sizing: border-box;
}
#nameAndContact table{
table-layout:fixed;
display:inline;
float:right;
width:30%;
padding:0 30px;
text-align:center;
font-family:"Arial Black", Gadget, sans-serif;
font-size:14px;
}
@media(max-width:700px){
#nameAndContact h1{
width:100%;
float:none;
}
#nameAndContact table{
width:100%;
float:none;
}
}
-------- КОНЕЦ CSS CODE ---------
Проблема, с которой я сталкиваюсь, заключается в том, что когда я изменяю размер окна в моем браузере, электронная почта и слова «Контактная информация» начинают обрезаться на правая сторона экрана. Нужно ли мне как-то оборачивать текст в таблице? Есть ли проблема с процентами, которые я использую как для моего h1, так и для моей таблицы? Также не ясно, по какой причине моя таблица не отображается в соответствии с моим h1. Любая помощь очень ценится, я довольно новичок в веб-кодировании, спасибо всем:).