Resizing the screen does not trigger media queries to take effect

Question

Resizing the screen does not trigger media queries to take effect

I am facing an issue with media queries. I am trying to set the width property of a container to 100% of the page, but it is not working as expected. I am using Bootstrap as my CSS framework. Here's a snippet from the inspector:https://i.sstatic.net/PaUzk.png

Code:

<div class="container-flex" id="blog-posts">
    <div class="post-left">
        <div>
            <img class="img-responsive" src="images/content/blog/post-image.jpg">
        </div>
    </div>
    <div class="divider">
        <div class="divider-dot"></div>
        <div class="divider-line"></div>
    </div>
    <div class="post-right">
        <div>
            <time>10 April 2014</time>
            <h3>Typi non habent claritatem insitam</h3>
            <p>Duis autem vel eum iriure dolor in hendreit in vulputate velit esse molestie consequat vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui [...]</p>
        </div>
    </div>
</div>

CSS:

@media only screen and (max-width : 767px) {
    #blog-posts {
        display: flex;
        flex-direction: column;
        width: 100%;
        border: 1px solid blue;

        .divider {
            display: none;
        }

        .post-left {
            ;
            width: 100%;

            div {
                //width: 100%;
                border: 1px solid;
            }
        }

        .post-right {
            width: 100%;

            div {
                width: 100%;
                border: 1px solid;
            }
        }
    }
}

...

#blog-posts {
    display: flex;

    .post-left {
        width: 47.95%;
        //border: 1px solid blue;
        div {
            width: 50%;
            float: right;

            img {
                float: right;
            }
        }
    }

    .divider {
        //border: 1px solid;
        width: 4.1%;

        .divider-dot {
            border-radius: 50%;
            background-color: rgb(235, 235, 235);
            width: 17px;
            height: 17px;
            margin: 0 auto;
        }

        .divider-line {
            width: 1px;
            height: 100%;
            background-color: rgb(235, 235, 235);
            margin: 0 auto;
        }
    }

    .post-right {
        //border: 1px solid green;
        width: 47.95%;

        div {
            width: 50%;

            time {
                font-size: 16px;
                font-family: "Raleway";
                color: rgb(123, 108, 99);
                line-height: 1.875;
                text-align: left;
            }

            h3 {
                font-size: 24px;
                font-family: "Raleway";
                color: rgb(33, 33, 33);
                line-height: 1.25;
                text-align: left;
            }

            p {
                font-size: 16px;
                font-family: "Raleway";
                color: rgb(148, 148, 148);
                line-height: 1.875;
                text-align: left;
            }
        }
    }
}

html css twitter-bootstrap responsive-design media-queries

Answer 1

Answer №1

In accordance with the advice from previous comments, it is important to place media queries after your default styles so that they can override them if necessary.

Here is how your code should be structured:

#blog-posts{
  // styles...
}

@media only screen and (max-width : 767px) {
  #blog-posts{
    // styles...
  }
}

To illustrate this concept further, consider overwriting a class:

div {
  height: 100px;
  width: 100px;
}
.color {
  background: red;
}
.color {
  background: green;
}

<div class="color"></div>

As demonstrated, the block appears green instead of red.

The same principle applies to media queries, with the distinction that they only take effect when the viewport exceeds the specified size.

Answer 2

In accordance with the advice from previous comments, it is important to place media queries after your default styles so that they can override them if necessary.

Here is how your code should be structured:

#blog-posts{
  // styles...
}

@media only screen and (max-width : 767px) {
  #blog-posts{
    // styles...
  }
}

To illustrate this concept further, consider overwriting a class:

div {
  height: 100px;
  width: 100px;
}
.color {
  background: red;
}
.color {
  background: green;
}

<div class="color"></div>

As demonstrated, the block appears green instead of red.

The same principle applies to media queries, with the distinction that they only take effect when the viewport exceeds the specified size.

Answer 3

Answer №2

Your media query style is being overridden by a different rule lower in your scss file.

Try relocating that media query block to the bottom of your style.scss file.

Edit

The reason for this issue is that you initially define the rule for your media query and then have another conflicting rule later in your code, causing it to overwrite the previous one.

For example:

@media (max-width: 768px) {
    .my-class {
        color: red;
    }
}

.my-class {
    color: blue;
}

In this scenario, any element with the class my-class will display the color blue, regardless of screen size. The last rule specified takes precedence over the prior one. To rectify this, consider altering the order of these rules:

.my-class {
    color: blue;
}

@media (max-width: 768px) {
    .my-class {
        color: red;
    }
}

Following this adjustment, elements with the class my-class will appear in blue if the screen width is at least 768px. If the screen width falls below 768px, the media query rule will supersede the initial rule, assigning a color of red.

Please note that there are alternate solutions available as well. One alternative would be to include !important within your media query, though it is advisable to minimize its usage if other resolutions exist.

Another approach involves enclosing your class within an additional media query, where the order does not impact the outcome:

@media (max-width: 768px) {
    .my-class {
        color: red;
    }
}

@media (min-width: 768px) {
    .my-class {
        color: blue;
    }
}

Answer 4

Your media query style is being overridden by a different rule lower in your scss file.

Try relocating that media query block to the bottom of your style.scss file.

Edit

The reason for this issue is that you initially define the rule for your media query and then have another conflicting rule later in your code, causing it to overwrite the previous one.

For example:

@media (max-width: 768px) {
    .my-class {
        color: red;
    }
}

.my-class {
    color: blue;
}

In this scenario, any element with the class my-class will display the color blue, regardless of screen size. The last rule specified takes precedence over the prior one. To rectify this, consider altering the order of these rules:

.my-class {
    color: blue;
}

@media (max-width: 768px) {
    .my-class {
        color: red;
    }
}

Following this adjustment, elements with the class my-class will appear in blue if the screen width is at least 768px. If the screen width falls below 768px, the media query rule will supersede the initial rule, assigning a color of red.

Please note that there are alternate solutions available as well. One alternative would be to include !important within your media query, though it is advisable to minimize its usage if other resolutions exist.

Another approach involves enclosing your class within an additional media query, where the order does not impact the outcome:

@media (max-width: 768px) {
    .my-class {
        color: red;
    }
}

@media (min-width: 768px) {
    .my-class {
        color: blue;
    }
}

Answer 5

Answer №3

Remember to always include !important at the end of the width:100% declaration

Answer 6

Remember to always include !important at the end of the width:100% declaration

Resizing the screen does not trigger media queries to take effect

Answer №1

Answer №2

Edit

Answer №3

Similar questions

How to position the figcaption within a card?

Space left unattended at the lower edge of the sheet

Employ the Google Charting library for creating a GeoChart that is currently not displaying

Utilize a unique CSS selector and content property to insert a space character between two inline-block elements

Range slider in Bootstrap showing values as labels

To see website changes, refreshing with Ctrl + F5 is necessary in the browser

The core-icons icon doesn't appear as intended in version 1.2.1 of Polymer

What is the reason for Angular Material using pixels to measure fonts?

Align the label vertically with the corresponding input field

Tips for deleting an HTML row and removing an entry from a MySQL database through the use of AJAX

Guide to updating the value of a CSS seconds dynamically

Choosing pseudo-elements with CSS styling rules

Use Angular2 to showcase the selected image as the main one when the user clicks on the

A bar is seen above the directive within the partial

A 4-image panel grid featuring a central blank space, perfect for an email template design

The class is failing to be applied to the parent div that holds an id starting with the letter x

Display 3 buttons only on screens smaller than 576 pixels, and hide them on wider screens

Does the webpack style loader load only application-specific CSS, or is it designed to handle all CSS files?

How to Customize Background Colors for Blogspot Posts?

Utilizing the Aladin Lite application within a React application, despite not being specifically designed for React