My media queries refuse to cooperate until I add the magical "!important" declaration

Utilizing Bootstrap 4 along with a custom CSS file on my website.

Within the CSS file, I have included some media queries at the bottom:

@media (max-width: 575px) {
  .address .contact {
    text-align: center;
  }
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  }

@media screen and (min-width:768px) and (max-width:992px){
  .left{
    margin-left: 0;
    width: 100%;
  }

  .picto{
    width: 40%;
  }

}

Included below is an excerpt of code:

<section id="section_address" class="container">
        <div class="row">
            <div class="col-12 col-sm-6">
                <div class="address">
                    <h5>ADDRESS</h5>
                    1 street,<br>
                    75000, PARIS
                </div>
            </div>
            <div class="col-12 col-sm-6">
                <div class="contact">
                    <h5>MYCOMPANY</h5>
                    01 11 22 33 44<br>
                    <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="35565a5b4154564175584c565a5845545b4c1b565a58">[email protected]</a><br>
                    <a href="http://mycompany.com" target="_blank">http://mycompany.com</a>
                </div>
            </div>
        </div>
    </section>

However, my media queries seem to not take effect unless I include !important on each line. This goes against my previous experience as I've never had to use it before.

cssbootstrap-4media-queries

Answer №1

Make sure to include the Bootstrap css file before your custom css file in your html page to prevent Bootstrap from overriding your styles.

Answer №2

It is important to ensure that your custom CSS is added after all other CSS files, as this will allow your custom styles to take precedence and override any conflicting styles.

This is because CSS applies styles in a "top to bottom" order, with later styles having priority over earlier ones.

Thank you for your attention!

Answer №3

Chances are, the elements you customized with your own CSS classes also have Bootstrap classes affecting them (such as .row, column, col-12 and more), and the CSS rules from Bootstrap (especially those that involve multiple classes) have a greater level of specificity, overriding your custom classes.

To achieve the desired outcome, use your browser's developer tools to inspect those elements and identify which CSS class / rule / selector is being applied. Then create a new rule using the same selector (combination of classes) PLUS your custom class, increasing the specificity and ultimately overriding the original Bootstrap rule.

Answer №4

It's best to avoid using !important unless it is absolutely necessary, as it can lead to maintenance issues.

Instead of relying on default Bootstrap styles, try to make your CSS rules more specific. Take a closer look at the DOM structure and identify any conflicting rules. Update your selectors according to the specificity guidelines to ensure they have higher priority.

In reference to the code snippet you added:

@media (max-width: 575px) {
  .address .contact {
    text-align: center;
  }
}

This targets all elements with the class of .contact that are descendants of elements with the class `address', which may not be correct based on the provided context.

If you intend to target both classes, you should use a comma selector:

@media (max-width: 575px) {
    .address, .contact {
        text-align: center;
     }
}

If further specificity is required, consider targeting the elements by their IDs:

@media (max-width: 575px) {
    #section_address .address, #section_address .contact {
        text-align: center;
     }
}

Additionally, I did not find any references to classes .left or .picto.

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

Navigation dropdown menu with the latest Bootstrap 4 features

Attempting to recreate the design from Codepen using Bootstrap 4. The current progress can be viewed in this Codepen (drop down with 2 columns), which is assisting with online tutorials. Here's the HTML for the Navbar: <nav class="navbar navbar- ...

jquerycsstwitter-bootstrapbootstrap-4

Mastering the art of carousel div creation with Bootstrap

Is there a way to create a carousel in Bootstrap 3 where only one div slides at a time, instead of three? I attempted to use divs instead of images in the traditional carousel structure, but it's not functioning as expected. I'm looking for some ...

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3

Apply a chosen style to the element that was clicked on, while removing the style from the rest

Here is an example of my ul li structure: <div id="categoryTree"> <ul> <li id="cat_15"> <a class="hasSubCat" href="javascript:void(0);"><img src="images/icons/folder.gif" border="0" alt="Folder" title=" Folder ">N ...

javascriptjqueryhtmlcss

Concealed image lurking beneath navigation bar

My navbar displays an image below it, but the top part of the image is cut off. The desired outcome is for the image to start at the bottom of the navbar to prevent any cropping issues. This becomes more noticeable as the screen size decreases. I attempted ...

htmlcss

Is there a way to format the text into a curved half-capsule shape?

<div class="bg-primary rounded-pill"> <p class="text-right"> TOTAL AMOUNT </p> <p class="text-right"> 200 </p> </div> I would like the text within a div element to appear in a capsule shape. Is there a way t ...

cssbootstrap-5

the content outside of the division is incorrectly formatted

Here is the code snippet that I am working with: <html lang='es'> <head> <link rel="stylesheet" type="text/css" href="theme.css"> <link rel="stylesheet" type="text/css" href="bootstrap337/css/bootstrap.mi ...

htmlcss

Fade effect not working with Bootstrap Modal

I am encountering an issue with the Twitter Bootstrap modal while trying to display post details on WordPress. The problem is that when the modal opens, the entire screen turns grey and nothing in the modal is clickable. I can only exit this mode by pressi ...

javascriptjquerycsswordpresstwitter-bootstrap

Using jQuery to create radial-gradients with the background-css feature

I'm a newcomer to this online community and English is not my first language. Despite that, I will do my utmost to clearly explain the issue at hand. Recently, I utilized the .css function in jQuery to create a design element successfully. However, I ...

jquerycss

What is the best way to erase information displayed when hovering over an element using mouseout?

Whenever the user hovers over an image, an information box appears regarding that specific image. The information inside the box changes as I move over another image, but when not hovering over any images, the information box remains visible. Unfortunately ...

javascriptphpjquerycssweb

What's the best way to ensure that my image remains perfectly centered at the point where the background colors of my

html <body> <header> <div class="indexHeaderWall" id="headerLeftWall"> </div> <img id="profilePic" src="icons/myPicture.jpg" alt="Picture of Daniel Campo ...

htmlcssflexboxpositionweb-deployment

What is the best strategy to prevent reflow and flickering when loading images on a website?

My website displays an image on the left with text on the right, but when the server is busy or the connection is slow, the page flickers. It initially shows the text on the left and then suddenly moves it to the right once the image loads. This issue see ...

htmlcss

To implement a class based on a media query, only pure CSS or HTML is required

Is there a way to apply a specific class to an ID based on screen height using only CSS, HTML, or LESS without pre-compilation? The goal is to set classes from Add2Any, not CSS properties. Here is a link to the jsfiddle. The desired outcome is to have th ...

htmlcssresponsive-designlesssocialshare

Is there a quick way to import all available font weights from a Google font?

I am looking to experiment with importing all weights and styles of a Google font, such as Roboto or Roboto Slab, in a CSS file. Is there a more efficient way to do this rather than listing out each individual style in the @import? ...

cssgoogle-fonts

Why is the Footer component in Next.js Styling not staying at the bottom of the screen as intended?

Why is the Footer component not at the bottom of the screen in Next.js Styling? import Head from "next/head"; import Navbar from "./Navbar"; import Footer from "./Footer"; const layoutStyle = { display: "flex", flexDirection: "column", height: "10 ...

cssreactjsnext.js

Using HTML and CSS to implement a broadened perspective for a specific design

https://i.stack.imgur.com/ckQHa.png Hello, I am facing an issue with a UX design that is optimized for 1200px resolution width. However, when the HTML is loaded in a browser on a larger window resolution, there is a 200px gap on the right side. How can I ...

htmlcssreactjs

What is the best way to change a dynamically centered text alignment?

Is it possible to add a transition for a center-aligned text that changes due to an action? (codepen) HTML : <div id="container">Lorem ipsum dolor sit amet consectetur adipiscing elit</div> CSS : #container { width: 400px; height: 20px ...

jqueryhtmlcssreactjs

Strange occurrences observed with the interaction of multiple CSS classes

Recently, I encountered a situation with a class that had me puzzled. .lifetime .containerrow { text-align: center; height: 20px; } To enhance the appearance of certain elements by making their text bold, I attempted the following: .lifetime .co ...

cssclassstyles

Attempting to create a JavaScript calculator from scratch

After spending hours typing and debugging my code for a school assignment, I have created a calculator that still isn't working. I'm hoping someone can help me find the errors in my code. function myStory() { window.alert ("Very doge"); } // ...

javascriptjqueryhtmlcsscalculator

Struggling with Duplicated Images

Currently working on a website using only HTML and CSS. I am still learning the ropes in this area. My goal is to create a layout with a header, body, and footer that repeat to fill up the entire page, similar to envato.com. Here is a snippet of the code I ...

csshtml

What methods are available to generate dynamic shapes using HTML?

Looking to create an interactive triangle where users can move vertices or sides, updating angles in real-time. I'm struggling with how to accomplish this task. My initial attempt was to manually draw the triangle using the code below. <!DOCTYPE ht ...

javascripthtmlcss