The image when browser is collapsed to minimal size
When site is collapsed, the text is going outside the block's frames. The same is happening when the mobile view is turned on at DevTools.
For developing I used Bootstrap 4.
Text needs to go on new line in block frames, instead it going out of it. overflow-wrap does not change anything.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Site.css">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap.css">
<title>Визитная карточка</title>
</head>
<body class="setting-body">
<div class="head">
<h1>Домашнее задание</h1>
</div>
<div class="copy-jumbotron jumbotron ">
<div class="row parent">
<div class="col-md-4 col-lg-4 col-sm-4 setting-div-for-image">
<div>
<img class="setting-image" src="Resources/Avatar.jpg" />
</div>
</div>
<div class="col-md-4 col-lg-4 col-sm-4 setting-information">
<h2>Королев Максим Евгеньевич</h2>
<p>Студент с многопрофильного колледжа ТИУ, желающий научиться программировать</p>
<p>Ссылки на социальные <wbr /> сети:</p>
<div>
<div class="links">
<div class="links">
<a class=" links-iteems text-links" target="_blank" href="https://github.com/MaxZmoZg">
<img class="img-links" src="Resources/Git-Icon-Black.png" />
<p class="paragraph">GitHub</p>
</a>
<a class="links-iteems text-links" target="_blank" href="https://vk.com/max_koroliov">
<img class="img-links" src="Resources/Vklogo.png" />
<p class="paragraph">Вконтакте</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
*{box-sizing:border-box;}
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
.parent {
display: flex;
width: 90%;
flex-direction: row;
}
.setting-image{
width:150px;
height:150px;
border-radius:90px;
align-content:center;
}
.setting-div-for-image {
display: flex;
align-items: center;
justify-content: center;
}
.setting-information{
width:100% !important;
overflow-wrap: break-word;
}
.links {
display: flex;
}
.links-iteems {
display: flex;
margin-right:20px;
}
.img-links{
width:30px;
height:30px;
flex:auto;
}
.text-links {
text-decoration: none;
color: black;
font-size: 14px;
}
.text-links:hover {
text-decoration: none;
color: #1f8ac8;
font-size: 14px;
}
.paragraph {
display:flex;
margin:0px;
margin-left:10px;
align-items: center;
justify-content: center;
}
.copy-jumbotron {
margin-top: 100px;
background: #fcfafa !important;
-webkit-box-shadow: 0px 5px 12px 1px rgba(34, 60, 80, 0.2);
-moz-box-shadow: 0px 5px 12px 1px rgba(34, 60, 80, 0.2);
box-shadow: 0px 5px 12px 1px rgba(34, 60, 80, 0.2);
border-radius: 20px;
overflow-wrap: break-word;
}
.head{
font-size:25px;
}
.setting-body{
margin-right: 15px;
margin-left: 15px;
}
