L
L
LissaAlbatross2019-08-15 15:29:27
Adaptive design
LissaAlbatross, 2019-08-15 15:29:27

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

1 answer(s)
A
atomos90, 2019-08-15
@atomos90

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 question

Ask a Question

731 491 924 answers to any question