Can Media Queries Resize Based on a Div Element Instead of the Screen

Can media queries resize based on a div element instead of the screen?

After nearly a decade of work — with proposals, proofs-of-concept, discussions and other contributions by the broader web developer community — the CSS Working Group has finally laid some of the groundwork needed for container queries to be written into a future edition of the CSS Containment spec! For more details on how such a feature might work and be used, check out Miriam Suzanne's extensive explainer.

Hopefully it won't be much longer before we see a robust cross-browser implementation of such a system. It's been a grueling wait, but I'm glad that it's no longer something we simply have to accept as an insurmountable limitation of CSS due to cyclic dependencies or infinite loops or what have you (these are still a potential issue in some aspects of the proposed design, but I have faith that the CSSWG will find a way).

Media queries aren't designed to work based on elements in a page. They are designed to work based on devices or media types (hence why they are called media queries). width, height, and other dimension-based media features all refer to the dimensions of either the viewport or the device's screen in screen-based media. They cannot be used to refer to a certain element on a page.

If you need to apply styles depending on the size of a certain div element on your page, you'll have to use JavaScript to observe changes in the size of that div element instead of media queries.

Alternatively, with more modern layout techniques introduced since the original publication of this answer such as flexbox and standards such as custom properties, you may not need media or element queries after all. Djave provides an example.

css media query not working for specific div?

Your media query is working as expected: The background-colors are applied and the height is set. The background-color for .search wasn't so good visible because the search input has a width: 0px - therefor i tested with 50px. The change of the height wasn't visible because everything was white - therefor i tested with:

nav {
  background-color: #ccc;
}

Now you can see that on big screens the nav has no height (= auto) and on small screens 40px (use the browsers dev tools).

Working example:

nav {
  background-color: #ccc;
}

nav ul {
  display: inline-flex;
  list-style: none;
  transform: translate(16%);
}

nav ul li {
  margin-right: 50px;
}

.search {
  border-radius: 40px;
  background-color: lightcoral;
  display: inline-flex;
  height: 35px;
  transform: translate(180px, -1px);
}

.search input {
  position: relative;
  left: 10px;
  top: 0px;
  outline: none;
  width: 0px;
  border: none;
  background: transparent;
  transition: 0.5s;
}

.search:hover input {
  width: 150px;
}

.btn {
  height: 35px;
  width: 35px;
  border-radius: 35px;
  background-color: lightseagreen;
}

.btn i {
  position: Relative;
  top: 9px;
  left: 9px;
}

@media screen and (max-width: 1380px) {
  nav {
    background-color: greenyellow;
    height: 40px;
  }
  .search {
    background-color: indigo;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">

<nav>
  <ul>
    <li><a href=#>word1</a></li>
    <li><a href=#>word2</a></li>
    <li><a href=#>word3</a></li>
  </ul>

  <div class="search">
    <input type="text" placeholder="search">
    <div class=btn>
      <i class="fas fa-search"></i>
    </div>
  </div>
</nav>

CSS media queries by div width or height

You can do this with jQuery.

function change_size(){
   var window_height = $(window).height();
   var div_height = $("#your_id").height();
   if(window_height < div_height){
          $("#your_id").css({marginTop: "20px", height: "20px"});  //for example
   }
}

$(document).ready(function(){
   change_size();
});
$(window).resize(function(){
   change_size();
});

Media Query-like behaviour on width of a specific div

Unfortunately there is not currently a way for a media query to target a div. Media queries can only target the screen, meaning the browser window, mobile device screen, TV screen, etc...

How can I get media query to resize div based on the width of the screen?

I'm pretty sure you didn't set the viewport meta correctly in header or forgot at all about it.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

With this the the browser knows how to control the page dimensions and scaling.

Basically without it your website won't work responsivly.

width=device-width means you set to the width of the page to follow the screen-width of your device

initial-scale=1.0 sets the zoom level to 1 when the page is loaded

Responsive media query div element not aligning elements to the left

make display:block in .icon-links
remove margin-top: 5rem; from .icon-links
Add margin-top :2rem in .icon-link

Refer this example its work :-)

body{
  background: #C7E2F8;
}

img{
  width: 40%;
}

.icon-links{
    display: block;
    flex-direction: row;
    justify-content: flex-start;
    align-items: left;
    width: 50%;
}

.contact-link{
    color: black;
    font-size: 1.8rem;
    padding: 18px 27px;
    background-color: gray;
    margin-right: 5rem;
    transition: 0.3s;
    cursor: pointer;

}

.contact-link:hover{
    background-color: var(--blue);
    color: var(--darkGray);
    transition: 0.3s;
}

.icon-link{
    margin-right: 2.2rem;
    transition: all 0.3s;
    margin-top: 2.0rem;
}


.icon-wrappers{
    display: flex;
    flex-direction: row;
}


@media screen and (max-width: 768px){

    .icon-links{
        flex-direction: column;
        justify-content: flex-start;
        align-items: left;
    }

    .icon-wrappers{
        justify-content: flex-start;
        align-items: left;
        margin-top: 2rem;
    }
  
  .contact-link{
    margin: 0;
  }

}

                      <div class="icon-links">
                        <a class="contact-link">
                            Contact Us
                        </a>
                    
                    <div class="icon-wrappers">
                        <a class="icon-link" href="#"><img src="https://d.ibtimes.co.uk/en/full/1487456/twitter-logo.png" alt=""></a>
                        <a class="icon-link" href="#"><img src="https://d.ibtimes.co.uk/en/full/1487456/twitter-logo.png" alt=""></a>
                        <a class="icon-link" href="#"><img src="https://d.ibtimes.co.uk/en/full/1487456/twitter-logo.png" alt=""></a>
                    </div>

            </div>

Why media queries are ignored when touch mode is enabled?

Your media queries don't work on mobile because you haven't set the viewport width to device width

Try adding the following to the <head> of your index.html

<meta name="viewport" content="width=device-width, initial-scale=1" />

Can Media Queries Resize Based on a Div Element Instead of the Screen