Пожалуйста подскажите мне мою ошибку в коде.При разрешении экрана для мобильных устройств, верстка съезжает влево.Текст вылезает на блоки! Но при использование word-wrap: break-word; overflow:hidden; текст вообще не виден уходить под блок!
Помогите, пожалуйста, исправить ситуацию.
* {
transition: all .2s;
}
.clear{
clear:both;
}
html,body{width:100%; height:100%; margin:0}
body {
background-color:#000;
background:url('https://content.freelancehunt.com/projectsnippet/ee03a/ae983/115597/fon_4.jpg')
}
.wrapper{
width:940px;
margin:50px auto;
overflow:hidden;
word-wrap: break-word;
}
.header {
background:#DDA0DD;
width: 100%;
height: 200px;
border-radius: 5px;
color:#000000;
word-wrap: break-word;
font-weight: bold;
overflow:hidden;
}
.top_menu {
background: #87c5ff;
width: 100%;
margin-top: 5px;
height: 50px;
position: relative;
}
.knopka {
display: none;
width:32px;
height: 21px;
top: 2px;
left: 6px;
background: #6d6e6d;
border-radius: 2px;
position: absolute;
}
.lan {
width: 29px;
height: 3px;
background: #2b2828;
margin: 3px auto;
}
.lan {
width: 29px;
height: 3px;
background: #2b2828;
margin: 3px auto;
}
.sideLeft {
background: #81ffb6;
width: 30%;
margin-top: 5px;
padding: 1px 0;
float: left;
word-wrap: break-word;
overflow:hidden;
}
.bar {
background:#F4A460 ;
border-radius: 5px;
border: 1px solid #000080 ;
margin: 3px auto;
width: 95%;
height: 210px;
word-wrap: break-word;
overflow:hidden;
}
.content {
background: #fefffd;
width: 69%;
margin-top: 5px;
height: 655px;
float: right;
word-wrap: break-word;
font-weight: bold;
overflow:hidden;
}
.footer {
background: #91a43c;
width: 100%;
margin-top: 5px;
height: 70px;
word-wrap: break-word;
}
img {
max-width: 100%;
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
.wrapper {
width: 750px;
}
.header {
background: #a1ece5;
}
.top_menu {
background: #64f1eb;
}
.sideLeft {
background: #80e47e;
}
.content {
background: #f0f1ef;
}
.footer {
background: #9ea424;
height: 45px;
}
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
.wrapper {
width: 450px;
word-wrap: break-word;
overflow:hidden;
}
.header {
background: #86ebff;
height: 100px;
border-radius: 3px;
word-wrap: break-word;
overflow:hidden;
}
.top_menu {
background: #2ca9b7;
margin-top: 4px;
height: 25px;
}
.knopka {
display: block;
}
.sideLeft {
background: #5ab37f;
width: 100%;
margin-top: 4px;
float: none;
word-wrap: break-word;
overflow:hidden;
}
.bar {
background: #d5fdf1;
border-radius: 2px;
width: 98%;
height: 50px;
overflow:hidden;
}
.content {
background: #dbdddb;
width: 100%;
margin-top: 4px;
height: 250px;
float: none;
word-wrap: break-word;
overflow:hidden;
}
.footer {
background: #758430;
margin-top: 4px;
height: 35px;
word-wrap: break-word;
overflow:hidden;
}
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
.wrapper {
width: 320px;
word-wrap: break-word;
overflow:hidden;
}
.header {
background: #3dfff2;
word-wrap: break-word;
overflow:hidden;
}
.top_menu {
background: #328e8d;
}
.sideLeft {
background: #91b399;
word-wrap: break-word;
overflow:hidden;
}
.content {
background: #f2f4f2;
word-wrap: break-word;
overflow:hidden;
}
.footer {
background: #6d6e6d;
}
}
Простой
