What could be causing the Bootstrap 4.4.1 Media Query to not function properly?

Question

What could be causing the Bootstrap 4.4.1 Media Query to not function properly?

Attempting to incorporate a responsive design into my web application utilizing media queries with Bootstrap 4.4.1.

Conducting tests on the media queries using the following

Shown below is the styles.css code

@media only screen and (max-width: 575.98px) {
  body {
    background-color: red;
  }
}

@include media-breakpoint-up(sm) {
  .buttons {
    background-color:rgba(255,180,50,0.7);
  }
}

No changes when tested on a smaller device. Chrome dev tools display the style, yet it remains unapplied when running the application.

Is something missing here? Is there a specific import needed to utilize media queries with Bootstrap?
Which rule is more appropriate to use, @include or just @media?

css bootstrap-4 styles media-queries

Answer 1

Answer №1

Have you placed your media queries at the end of your styles.css file? It's important to ensure that your styles.css is declared in your header after the bootstrap css file to avoid any conflicts or overwriting of your media queries.

Answer 2

Have you placed your media queries at the end of your styles.css file? It's important to ensure that your styles.css is declared in your header after the bootstrap css file to avoid any conflicts or overwriting of your media queries.

Answer 3

Answer №2

If you provide a small example, we can pinpoint where the issue lies within the project.

The @include directive is used for incorporating mixins in SCSS/Sass. It's odd to see a value like 575.98px as pixel measurements shouldn't typically have decimals. If you need further assistance, consider elaborating on the issue in the CSS Discord community:

.thing {
  padding: 20px;
  background-color: red;
}

@media (min-width: 500px) {
  .thing {
    background-color: blue;
  }
}

https://jsfiddle.net/sheriffderek/q8jz7Lt9

.thing {
  padding: 20px;
  background-color: red;
}

@media (min-width: 500px) {
  .thing {
    background-color: blue;
  }
}

@media (min-width: 700px) {
  .thing {
    background-color: orange;
  }
}

<div class="thing">
  THING!
</div>

Answer 4

If you provide a small example, we can pinpoint where the issue lies within the project.

The @include directive is used for incorporating mixins in SCSS/Sass. It's odd to see a value like 575.98px as pixel measurements shouldn't typically have decimals. If you need further assistance, consider elaborating on the issue in the CSS Discord community:

.thing {
  padding: 20px;
  background-color: red;
}

@media (min-width: 500px) {
  .thing {
    background-color: blue;
  }
}

https://jsfiddle.net/sheriffderek/q8jz7Lt9

.thing {
  padding: 20px;
  background-color: red;
}

@media (min-width: 500px) {
  .thing {
    background-color: blue;
  }
}

@media (min-width: 700px) {
  .thing {
    background-color: orange;
  }
}

<div class="thing">
  THING!
</div>

Answer 5

Answer №3

Confirmation that the issue has been resolved. It slipped my mind that there was a background image set on the <body>, which caused this code snippet to not function correctly.

@media only screen and (max-width: 575.98px) {
  body {
    background-color: red;
  }
}

After removing the background image, the styling was successfully applied. Many thanks for your assistance and insights!

Answer 6

Confirmation that the issue has been resolved. It slipped my mind that there was a background image set on the <body>, which caused this code snippet to not function correctly.

@media only screen and (max-width: 575.98px) {
  body {
    background-color: red;
  }
}

After removing the background image, the styling was successfully applied. Many thanks for your assistance and insights!

What could be causing the Bootstrap 4.4.1 Media Query to not function properly?

Answer №1

Answer №2

Answer №3

Similar questions

Targeting the landscape mode on screens of both iPhone 4 and iPhone 5 sizes using CSS3 Media Queries

:host background color may be missing, but the font size has been boosted?

Modifying the Header Background Color

Tips for optimizing background images for various screen sizes?

The Bootstrap toast fails to appear on the screen

I require a breakdown of the JavaScript code, please

The transition effect for the box shadow is being altered to modify the dimensions

Validation of Button Groups and Automatic Disabling after Initial Click with HTML, CSS, and JavaScript

Setting intervals to change background images resulted in a delay

Issue with using float-right in Bootstrap v4. [Alternative to pull-right]

Enlarge the image to fill the entire screen

The getimagesize functionality seems to be malfunctioning

Seamless flow from one image to the next

Making the black background stretch to the full height and allowing for scrolling when necessary

Tips for effectively closing div elements

Utilizing image backgrounds for hyperlinks in the Android browser

Executing a code inside a jQuery modal element

What is the best method to retrieve child elements from a class list object?

Adjust the width of the table to scroll horizontally and size down to fit within the

Transferring Information between a Pair of Controllers