Как изменить положение блоков?

введите сюда описание изображения

Здравствуйте! Есть проблема. Как сделать так, чтобы тег не изменял свой размер из-за тега . Это особенно можно заметить с телефона. Верстаю по макету. Возможно проблема в позиционировании? Верстаю с макета, но для наглядности сделал 1000х1000px блок. То есть если уменьшать размер экрана, до 999px, будет уменьшаться в зависимости от .А мне нужно чтобы эти блоки были независимыми. На фото можете видеть проблему. Когда окно уменьшается до размеров черного блока, уменьшается вместе с ним

           body{
          background-image: url(png/background1.png);
          background-repeat: no-repeat;
          background-position: center center;
          background-attachment: fixed;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;

      }
      
      header{
          grid-area: header;
          font-family: Noto Sans;
          font-style: normal;
          font-weight: 500;
          color: white;
          height: 47px;
          width: 100%;
          background-color: #26529C;
          
      }
      
      .logo{
          margin-top: 10px;
          margin-left: 15px;
      }
      
      main{
          margin-top: 10px;
      }
      
      .testblock{
          width: 1000px;
          height: 1000px;
          background-color: black;
      }
      

    
      

      

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
        blockquote, q {
        quotes: none;
          }
          blockquote:before, blockquote:after,
         q:before, q:after {
        content: '';
        content: none;
         }
        table {
        border-collapse: collapse;
        border-spacing: 0;
        }



                <body>
                 <header>
             <img class="logo" src="svg/logo.svg"> 
                </header>

               <main>
               <!--
              <div class="block1">
                <img src="svg/block1.svg" class="block1_rectangle">
              </div>
              --> 
              <div class="testblock">
              
              </div>
                  </main>

                   <footer>

                    </footer>

                </body>

Ответы (1 шт):

Автор решения: Влад Дутчак

У вашего блока фиксированная величина (то есть в px) и если изменить разрешение экрана , к примеру , до 700px - блок будет "вылазить" на 300px. Или задавайте всё относительными величинами , или додайте медиа-запросы.

→ Ссылка