I've recently started working on a static webpage using VueJS/NuxtJS and Buefy as the UI library, although I am still learning about these technologies.
One issue that I have encountered is that certain elements on the page change style when I open Chrome Dev Tools. I suspect that a media query may be causing this, but I haven't been able to pinpoint the specific one responsible. This issue seems to be affecting various parts of my website, but for simplicity, let's focus on this one example.
In this section, the text is displayed in red: https://i.sstatic.net/9uJSZ.png
Here is the CSS code for that section:
.mar-awesome {
padding-top: 80px;
padding-bottom: 80px;
height: auto;
width: 100%;
text-align: center;
font-size: 1rem;
color: red;
}
However, when I inspect the element or open Chrome Dev Tools on the smallest window size, after a few seconds it changes to black like this: https://i.sstatic.net/ektH2.png
I believe this change may be due to the following CSS code in the root.scss file, particularly in the body section:
$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%;
}
}
}
Additionally, here is the template code from 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>
If anyone has any insights into why this automatic style change is happening, I would greatly appreciate your input.