stackoom
  简体   繁体   中英

The website layout changes as I move Google developer tools window upwards

 原文  2019-04-10 11:27:57  8   2    html/ css

Question

I faced the issue with the layout of website being changed by the Google developer tool window which opens when you click F12. So, to be more clear, when I click F12, the window appears but as I move the window upwards the layout gets changed, that is, gallery section reacts to the window and also moves upwards. I do not even know what is causing such problem. I really need your help. Here is the code I have: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./main.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
    <link rel="stylesheet" href="./external/owl.carousel.min.css">
    <link rel="stylesheet" href="./external/owl.theme.default.min.css">
    <title>Document</title>
</head>
<body>
    <header class="header">
    <div class="container">
    <div class="row">
        <div class="col-md-6 intro__welcome-box">
        <p class="header__welcome-content">Welcome to our kids School!!</p>
        </div>

</div>
    </div>

    <div class="navbar">
            <div class="container">
                <div class="row flex-container">
                            <h1 class="logo-box">
                                <a href="#">
                        <img class="logo-box__image" src="./images/logo.png" alt="The logo">
                               </a>
                         <span class="logo-box__motto"> Все начинается с детской мечты</span>
                        </h1>
                    <nav class="navigation">
                        <ul class="navigation__list">
                            <li class="navigation__link"><a href="">О Sunnyvale</a></li>
                            <li class="navigation__link"><a href="">Галерея</a></li>
                            <li class="navigation__link"><a href="">Персонал</a></li>
                            <li class="navigation__link"><a href="">Услуги</a></li>
                            <li class="navigation__link"><a href="">Контакты</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </header>

    <section class="showcase">
        <div class="container-fluid p-h-0">
            <div class="row">
                <div class="col-md-6">
<img src="./primary-original.jpg" alt="">
                </div>
                <div class="col-md-6">
<div class="showcase-content">
    <h2>Join Our Journey</h2>
    <p>of World Discovery</p>

    <a href="">Find Out More</a>
</div>
                </div>
            </div>
        </div>
    </section>

    <section class="gallery">
<div class="container">
<div class="row">

    <div class="col-md-6">
        <div class="content">
            <h2>
                Добро Пожаловать в галерею Sunnyvale
            </h2>
        </div>
        <div class="content-links m-v-30">
                <a class="anchor light-red" href="">Узнать больше</a>
                <a class="anchor orange" href="">Смотреть Все</a>
            </div>

    </div>
    <div class="col-md-6">
        <div class="carousel-container">
            <div class="owl-carousel room-carousel owl-theme">
                <img src="./medium-98dcfe.jpg" alt="">
                <img src="./primary-original.jpg" alt="">

            </div>
        </div>
    </div>


</div>

</div>

    </section>


    <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  <script src="./external/owl.carousel.min.js"></script>
  <script>
  $('.room-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:1
        }
    }
})
</script>
</body>
</html>

CSS code

.header {
  background: #ecf0f1;
}

.header [class*='intro'] {
  padding: 2rem;
}

p {
  margin: 0;
}

.intro__welcome-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.navbar {
  background: white;
}

.logo-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.logo-box__motto {
  font-size: 16px;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  border-left: 1px solid rgba(88, 87, 87, 0.507);
  padding: 0 1rem;
  color: rgba(88, 87, 87, 0.507);
  font-weight: bold;
  line-height: 1.5;
}

.logo-box__image {
  padding-right: 1rem;
}

.logo-box__motto {
  width: 30%;
  text-transform: uppercase;
  font-size: 1.5rem;
}

.gallery {
  padding: 5rem 0;
}

.gallery .content {
  width: 40%;
  text-align: center;
  text-transform: uppercase;
  font-size: 2rem;
  margin: auto;
}

.gallery .content h2 {
  line-height: 1.5;
}

.m-v-30 {
  margin: 30px 0;
}

.content-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.anchor {
  text-decoration: none;
  color: white;
  font-weight: 600;
  display: inline-block;
  padding: 1rem 1.5rem;
  border-radius: 30px;
  text-transform: uppercase;
}

.anchor:hover {
  text-decoration: none;
  color: white;
}

.anchor.light-red {
  background: rgba(255, 0, 0, 0.658);
  margin-left: 7rem;
}

.anchor.orange {
  background: orange;
  margin-right: 7rem;
}

.carousel-container {
  height: 300px;
  border-radius: 10px;
  overflow-y: hidden;
}

.p-h-0 {
  padding: 0;
}

.cloud {
  height: 200px;
  width: 100%;
  background-image: url(/cloud.png);
  position: absolute;
  bottom: 0;
}

.showcase img {
  width: 100%;
  height: 100%;
}

.showcase {
  height: 70vh;
  position: relative;
}

.header__tel-number {
  color: #ff7b00;
  font-weight: 700;
  font-size: 1.5rem;
}

.navigation__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.navigation__link a {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 20px;
  text-decoration: none;
  text-transform: uppercase;
  color: rgba(44, 43, 43, 0.603);
  font-weight: 600;
  -webkit-transition: background .5s, color .5s;
  transition: background .5s, color .5s;
}

.navigation__link a:hover {
  color: white;
  background: #ff7b00;
}

.flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.navigation {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.intro__address-box p {
  text-align: right;
}
/*# sourceMappingURL=main.css.map */

2 answers

solution1
 1  2019-04-10 12:09:26

The Chrome development tool is not an overlay by default, it's width/height is taken off the display screen. Since your design is responsive, it will adapt to the display size (which is browser window minus developer tool).

Solution: in the developer tool's menu, select "Undock into separate window"

Screenshot: https://i.stack.imgur.com/zhWz7.png

solution2
 1 ACCPTED  2019-04-10 12:13:15

This is happening because the .showcase section has the height set to 70vh , which is relative to the viewport-height. When you open the Dev Tools, the height of the window gets smaller, thus 70vh becoming less than with the full screen, thus moving the gallery upwards.

Simply remove height: 70vh; from .showcase to fix the issue. Code snippet below: 

  .header { background: #ecf0f1; } .header [class*='intro'] { padding: 2rem; } p { margin: 0; } .intro__welcome-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .navbar { background: white; } .logo-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .logo-box__motto { font-size: 16px; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; border-left: 1px solid rgba(88, 87, 87, 0.507); padding: 0 1rem; color: rgba(88, 87, 87, 0.507); font-weight: bold; line-height: 1.5; } .logo-box__image { padding-right: 1rem; } .logo-box__motto { width: 30%; text-transform: uppercase; font-size: 1.5rem; } .gallery { padding: 5rem 0; } .gallery .content { width: 40%; text-align: center; text-transform: uppercase; font-size: 2rem; margin: auto; } .gallery .content h2 { line-height: 1.5; } .mv-30 { margin: 30px 0; } .content-links { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; } .anchor { text-decoration: none; color: white; font-weight: 600; display: inline-block; padding: 1rem 1.5rem; border-radius: 30px; text-transform: uppercase; } .anchor:hover { text-decoration: none; color: white; } .anchor.light-red { background: rgba(255, 0, 0, 0.658); margin-left: 7rem; } .anchor.orange { background: orange; margin-right: 7rem; } .carousel-container { height: 300px; border-radius: 10px; overflow-y: hidden; } .ph-0 { padding: 0; } .cloud { height: 200px; width: 100%; background-image: url(/cloud.png); position: absolute; bottom: 0; } .showcase img { width: 100%; height: 100%; } .showcase { /* height: 70vh; */ position: relative; } .header__tel-number { color: #ff7b00; font-weight: 700; font-size: 1.5rem; } .navigation__list { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .navigation__link a { display: inline-block; padding: 5px 10px; border-radius: 20px; text-decoration: none; text-transform: uppercase; color: rgba(44, 43, 43, 0.603); font-weight: 600; -webkit-transition: background .5s, color .5s; transition: background .5s, color .5s; } .navigation__link a:hover { color: white; background: #ff7b00; } .flex-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .navigation { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .intro__address-box p { text-align: right; } /*# sourceMappingURL=main.css.map */ 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="./main.css"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css"> <title>Document</title> </head> <body> <header class="header"> <div class="container"> <div class="row"> <div class="col-md-6 intro__welcome-box"> <p class="header__welcome-content">Welcome to our kids School!!</p> </div> </div> </div> <div class="navbar"> <div class="container"> <div class="row flex-container"> <h1 class="logo-box"> <a href="#"> <img class="logo-box__image" src="./images/logo.png" alt="The logo"> </a> <span class="logo-box__motto"> Все начинается с детской мечты</span> </h1> <nav class="navigation"> <ul class="navigation__list"> <li class="navigation__link"><a href="">О Sunnyvale</a></li> <li class="navigation__link"><a href="">Галерея</a></li> <li class="navigation__link"><a href="">Персонал</a></li> <li class="navigation__link"><a href="">Услуги</a></li> <li class="navigation__link"><a href="">Контакты</a></li> </ul> </nav> </div> </div> </div> </header> <section class="showcase"> <div class="container-fluid ph-0"> <div class="row"> <div class="col-md-6"> <img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg" alt=""> </div> <div class="col-md-6"> <div class="showcase-content"> <h2>Join Our Journey</h2> <p>of World Discovery</p> <a href="">Find Out More</a> </div> </div> </div> </div> </section> <section class="gallery"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="content"> <h2> Добро Пожаловать в галерею Sunnyvale </h2> </div> <div class="content-links mv-30"> <a class="anchor light-red" href="">Узнать больше</a> <a class="anchor orange" href="">Смотреть Все</a> </div> </div> <div class="col-md-6"> <div class="carousel-container"> <div class="owl-carousel room-carousel owl-theme"> <img src="https://www.newyorkpass.com/images/rebrand/prices_01.jpg" alt=""> <img src="https://thenypost.files.wordpress.com/2017/04/new-york.jpg?quality=90&strip=all&w=618&h=410&crop=1" alt=""> </div> </div> </div> </div> </div> </section> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script> <script> $('.room-carousel').owlCarousel({ loop:true, margin:10, nav:true, responsive:{ 0:{ items:1 }, 600:{ items:3 }, 1000:{ items:1 } } }) </script> </body> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How can I move an image upwards in HTML? CSS selector image not displaying in website banner or in Chrome's Developer Tools window CSS only: Move the 2. item of a flexbox upwards when the width changes How to remove Developer tools changes redundancy Website not scaling correctly unless using developer tools How can I save HTML changes I made using Internet Explorer Developer Tools in SharePoint 2013? Mobile website looks great in chromes "developer tools" but is broken when I open the webpage Editing the Google Chrome Developer Tools Itself Envolve IM Changes Website Layout How to prevent user changes the maxlength of textarea in developer tools?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM