Responsive and @media for SCSS

I'm building a website but I'm having trouble using @media. The "width" I gave before are still used, but I want it to ignore the previous ones.

NOTE: I tried many things, but when I "inspect" the site, the @media codes I wrote appear to be inactive.

enter image description here

SCSS

@media only screen and (max-width: 768px) and (min-width: 376px) {
    .product-list {
        flex-direction: column;
    }

    .product-list-left 
    {
       width: 100%;
    }

    .resim1 
    {
        width: 100%;
    }

    .title 
    {
        width: 100%;
    }

HTML

<div class="container">
  <div class="product-list">
    <div class="product-list-left">
      <div class="resim1">
        <div class="title-bx">
          <div class="title"> Wooden <br>Water Bottles </div>

I gave the values I needed to give, but I did not get a complete result.

what i'm waiting for

enter image description here

What happened

enter image description here

Solution

Looks like the 'previous' styles have a higher specificity than the @media styles. Your previous selector includes 3 classes where as the styles in your media query have only 1. That means that the previous styles are more 'specific' than the others and there will not be overwritten. See https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity for more details.

Quick fix: copy the exact selector in the media query: .container[_ngcontent-wnu-c1] .product-list[_ngcontent-wnu-c1] .product-list-left[_ngcontent-wnu-c1] { ... }

Or: use !important after a property like this: .product-list { flex-direction: column !important;