Answer the question
In order to leave comments, you need to log in
How to make sure that the blocks do not run into each other at any screen resolution?
.maindiv{
position: absolute;
width: 60vw; /* Ширина */
height: 90vh; /* Высота */
background: url(../img/businessman.png); /* Фоновая картинка */
background-size: cover;
background-position: right;
color: black;
text-align: left;
padding-top: 0px; /* Отступ сверху */
padding-right: 0px;
right:0px;
z-index: 1;
background-repeat: no-repeat;
}
.block2{
position: relative;
font-size: 1.5em;
width: 100%; /* Ширина */
height: 100%; /* Высота */
color: black;
text-align: left;
padding-left: 0px;
left:0px;
z-index: 1;
background-repeat: no-repeat;
}
.block2:before {
content: '';
position: absolute;
display: inline;
left: 0;
top: 0;
width: 80%;
bottom: 0;
background-image: url(../img/block2.png);
background-size: contain;
background-repeat: no-repeat;
z-index: -1;}
.block2Wrap{z-index: 1; padding-left: 35%; padding-top: 15vh;}
<div class="maindiv col-7 right d-none d-sm-none d-xs-none d-lg-inline d-xl-inline">
</div>
<div class="block2">
...
</div>
Answer the question
In order to leave comments, you need to log in
Wrap block2 and maindiv with another div with position=relative, for example. Then the position of block2 and block2:before will be measured from it, and not from the edge of the screen. Also, use the same dimension everywhere, for example, if the width is in%, then the position is calculated in%. And it is better to use bootstrap or something similar, you will not need to calculate anything.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question