The layout moves down on the gamers because of graphics?

4r7.ru/test/index.html
here is an example
there are 2 images mega big beyond the screen.
as it should be, I want the images go beyond, but the screen itself is there to turn was impossible. this is the design element.
but there is a problem to mobile google chrome web browser. when I turn on devtools and for example put iphone 6
a rule of overflow:hidden is ignored and the screen can rotate in all directions.
as a black box whose left:95% goes in the right direction so that it is not even visible, so the screen thinks its width is not iphone 6 ...
how to solve this problem? how to make google chrome not consider the image width for the width of the screen?
this problem occurs only in google chrome
April 19th 20 at 12:03
1 answer
April 19th 20 at 12:05
/* In this block there is a picture whose width is 600px - registered it and stretches your content */
.bigmg {
 top: 0px;
 position: absolute;
 z-index: -500;
 left: 0;
 overflow: hidden;
 width: 100%;
}

And the black square is probably better left to replace: 95% on right: 5% is already at your discretion
.fixed {
 width: 50px;
 height: 100px;
 position: fixed;
 right: 5%;
 top: 15%;
 background-color: #000;
 z-index: 1000;
}
I understand, and how to make sure that the image is not stretched content? - Kaden_Sip commented on April 19th 20 at 12:08
@Kaden_Sip,
Well, I wrote styles:
.bigmg {
 top: 0px;
 position: absolute;
 z-index: -500;
 overflow: hidden; // add this
 width: 100%; // this
 left: 0; // And here if you need it
}

Then the picture will be cropped and all - jordi commented on April 19th 20 at 12:11
@jordi,
helped the following solution:
wrap everything in a div, give him 100% width and overflow hidden - Kaden_Sip commented on April 19th 20 at 12:14

Find more questions by tags Adaptive designGoogle ChromeCSS