Search code examples
cssvue.jssassgoogle-chrome-devtoolsmedia-queries

Certain elements of a page changes its style when opening chrome devtools

I'm working on this static webpage. It's built with VueJS/NuxtJS, with Buefy as the as the UI library and I'm completely new to these technologies.

My problem is whenever I open chrome dev tools, the certain elements of a page changes its style on their own. I'm thinking of media query has something to do with this, but I cannot find the culprit media query though. This is happening in several parts of my webpage, but for simplicity I'll take this one example.

So this section is color red enter image description here

And here is the CSS for that:

    .mar-awesome {
    padding-top: 80px;
    padding-bottom: 80px;
    height: auto;
    width: 100%;
    text-align: center;
    font-size: 1rem;
    color: red;
  }

Then if I inspect element or open chrome dev tools, on the smallest possible window, after a few seconds it turns to black color like this: enter image description here

And I'm guessing it's now referring to this CSS code(root.scss), on the body part:

$primary-font-family: 'Open Sans', sans-serif;
$primary-font-color: #333 !default;

html {
    line-height: 1.15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 95px;

    @media (max-width: 1024px) {
        height: unset;
    }

    body {
        font-family: $primary-font-family !important;
        color: $primary-font-color;
        padding-right: 0 !important;
        height: 100%;


        @media (max-width: 1024px) {
            overflow-x: hidden;
        }

        main.page-content {
            padding: 1.5rem 1rem 1.5rem 1rem;
        }

        #__nuxt,
        #__layout,
        .client-view {
            height: 100%;
        }
    }
}

By the way here is the vue file:

    <template lang="pug">
   
        .mar-awesome
            .content-width.content-height-padding
                | Mar is awesome. He’s so amazing we wish we had a dozen of him.
                br
                | The problem is we don’t, and Mar will only work 90 hours a week.   
</template>

Can anyone please give me an idea why is this happening?

Solution

  • I found the culprit. It has nothing to do with my CSS, it's a bug in chrome developer tools. I need to reset the devtool then it worked fine now.