Bootstrap is causing havoc with my media queries

Check out this example of my @media query code:

@media (max-width:1200px) { 
    html { background-color: red; } 
}

Everything was running smoothly with this code until I introduced the Bootstrap CSS.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

Unfortunately, as soon as I added bootstrap to the mix, my @media query stopped functioning properly.

htmlcsstwitter-bootstrap

Answer №1

In Bootstrap terms (the equivalent of):

body {
     background-color: white;
}

Therefore, you should be able to simply adjust your selector to body without encountering any issues:

@media (max-width:1200px) { 
    body {
        background-color: red;
    } 
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I make my sidebar as long as my content?

Check out my website at: I'm trying to make the sidebar on my site go all the way down to the footer, or be the same length as my content. I don't want to use JQuery or any other plugins for this. I believe it should be a simple CSS fix, but I&a ...

csshtmlsidebar

Display temporary text as a placeholder on the computer screen

I am looking to display a placeholder in mobile view and hide it in the desktop view. How can I achieve this? The desired mobile view should appear as follows: <label>Enter Name:</label> <input type="text"/> While the desktop view sh ...

htmlcssbootstrap-4

Finding URLs within a string except for those that are image or document links

As I work on developing a messaging system, one of the functions I am creating detects URLs within a string and adds anchor tags to them. However, I am facing an issue where the function is also adding anchor tags to URLs that point to images and documents ...

javascripthtml

Steps for including a solid bottom border in a toggled navigation bar that is responsive

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l ...

htmlcssbootstrap-5

Connect the common background of an absolute SVG element and a relative element

As I am not very familiar with CSS, I may be facing an XY problem where I have been able to find information about the individual parts involved but struggle to combine them effectively. The challenge is to add a background to a navbar while also incorpor ...

htmlcsssvg

Is there a way to ensure that the vertical scrollbar remains visible within the viewport even when the horizontal content is overflowing?

On my webpage, I have multiple lists with separate headers at the top. The number of lists is dynamic and can overflow horizontally. When scrolling horizontally (X-scrolling), the entire page moves. However, when scrolling vertically within the lists, I wa ...

javascripthtmlcss

Issue with adding text in jQuery when a nested div is also appended

I am attempting to add text and a nested div at the end of a list-group in order to achieve HTML output like this: <div class="list-group-item"> <div class="small> Username <div class="pull-right"> <a class="btn btn-li ...

jqueryhtmldomnested

Is there a technique to block small increments in a Time Input field?

Currently in the process of developing a tool to automate task scheduling within an Angular app. I am looking for a way to restrict the user's input when selecting the hour for task execution without having to install a complex input management packag ...

javascripthtmlangulartypescript

How can a JS script determine the shape of a quadrilateral based on its properties?

Hi there! I'm new to coding and could use some guidance. I've been given a task to create a script that takes input for the length of each side and the angles of each corner in order to determine whether the shape is a square, rectangle, rhombus ...

javascripthtml

The error message "category.js:9 Uncaught TypeError: Cannot read properties of null (reading 'classList') at HTMLAnchorElement.<anonymous> (category.js:9)" indicates that there is a problem with accessing properties of

Currently in the process of setting up an online store, and I'm aiming to have different categories displayed when a specific div is active. JAVASCRIPT: const tab_switchers = document.querySelectorAll('[data-switcher]'); for (let i = 0 ...

javascripthtmlcsssass

Rearrange items in a display: contents wrapper using CSS Grid

I'm having trouble positioning descendants in a root grid while they are enclosed in a container with display: contents. The issue I am facing is that one element is not being correctly placed within the grid: .wrapper { width: 80ch; margin: a ...

htmlcsscss-grid

Button click triggers popup

I have a basic HTML page with a button. I recently signed up for Mailchimp's newsletter and forms widget, and they provided me with a code to add to my site. The code currently triggers a pop-up when the page loads, but I would like it to only activat ...

javascriptjqueryhtml

Hide sub-strings using CSS display property as none

Is it feasible in CSS alone to conceal certain text within a string? I am aware of attribute selectors such as: [att^=val] - the "begins with" selector For example, given this: <div class="some_random_text"> This is a default text </div> ...

htmlcss

Image Appears Oversized on Mobile Due to Responsiveness

Attempting to make this landing page responsive has been quite challenging. Unfortunately, on mobile devices the image extends beyond the width of the screen when in portrait mode, requiring users to scroll to view the images and form. My expertise lies in ...

htmlcssresponsive

Numerous JWPlayers that do not overlap

I am attempting to set up Multiple Mutually Exclusive JWPlayers v8.1, but I am encountering an issue where only the first video listed takes up almost the entire page. In my code, I have tried setting the video height to 200 and width to 300. Additionall ...

htmlwordpressjwplayer

What could be causing document.getElementById to return null?

I've been troubleshooting my code and noticed that one of the methods in my JavaScript file is not functioning correctly. Does anyone have any insights into why this might be happening? index.html: <!DOCTYPE html> <html lang="en"> <he ...

javascripthtmlweb-applicationscanvashtml5-canvas

The functionality of the Jquery mobile panel ceases to work properly when navigating between pages within a multi-page

Within a multi-page template setup in a jQuery mobile application, an issue arises after navigating away from the first page using panel navigation. Upon returning to the first page through another form of navigation, the panel appears "hanged." Upon clos ...

javascripthtmljquery-mobilemobile

What causes certain HTML elements to appear greyed out in Developer Tools?

After dabbling a bit with HTML, I've noticed some elements being displayed in gray by the developer tools. Any insight on why this is happening would be greatly appreciated. https://i.sstatic.net/miWH4.jpg ...

htmldeveloper-tools

The sub-menu options are constantly shifting... How can I keep them in place?

Here we go again... I'm having trouble with my sub-menu elements moving when I hover over them. I've searched for a solution but haven't found anything helpful. The previous advice I received about matching padding and adding transparent bo ...

htmlcss

What is the proper method for creating an HTML header that includes a linked icon?

While I have figured out how to make these examples look and function the same, I am uncertain about which is the optimal method for creating an HTML structure. <a><img><h1></h1></a> - it seems incorrect because an inlin ...

html