can media query changes based on main div width instead of window width?

Question

my Friends I have a problem.i have a project that has 3 buttons in it's header .these buttons change width of main div to my specific width has set in my Java script.i want something like media queries for example change my div color or hide or show something when div width changes. i know I can use Java script to define background color for every width but imagine that i have navbar that has sandwich menu button on mobile.this button can easily hide in an specific width that i have defined on my media queries;but what about hiding this button when my main div width decreases to mobile view width instead of changing browser width? please excuse me for this long text.


    
      
      
        
          
        
        
          
        
        
          
        
      
    

    
      
    

    
      Coded by Mahdi Baghaei

*,
html {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "poppins", sans-serif;
}

header {
  min-height: 5vh;
  position: relative;
  background-color: #e4e1fc;
  width: 15%;
  margin: 0 auto;
  transition: all 0.2s ease;
}

.header-collapse {
  position: absolute;
  display: block;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  background-color: #e4e1fc;
  width: 2rem;
  height: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #2512cc;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.2s ease;
}
.header-collapse:hover {
  background-color: #a49af6;
  color: white;
}

.header-set {
  transform: translateY(-100%);
}

.header-collapse-set {
  transform: translateX(-50%) rotateZ(-180deg);
}

.screens {
  width: 100%;
  margin: 0 auto;
  display: flex;
  list-style: none;
  justify-content: space-around;
  height: 100%;
  align-items: center;
  padding: 1rem;
}
.screens li a {
  width: 2rem;
  height: 2rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  transition: background-color 0.3s ease, color 0.2s ease;
  color: #2512cc;
  align-items: center;
}
.screens li a:hover {
  background-color: #a49af6;
  color: white;
}
.screens li a i {
  font-size: 1rem;
}

.content {
  width: 100%;
  height: 75vh;
  transition: all 0.4s ease;
  margin: auto;
  border: 1px solid white;
}

.content-mobile {
  width: 768px;
}

.content-tablet {
  width: 1200px;
}

footer {
  margin-top: auto;
  background-color: #e4e1fc;
  min-height: 5vh;
  padding: 1rem;
  text-align: center;
}
footer span {
  font-size: 0.9rem;
}

@media screen and (max-width: 768px) {
  .content {
    background-color: red;
  }
}
@media screen and (min-width: 768px) {
  .content {
    background-color: green;
  }
}
@media screen and (min-width: 1200px) {
  .content {
    background-color: blue;
  }
}

const header = document.querySelector("header");
const headerCollapse = document.querySelector(".header-collapse");
const content = document.querySelector(".content");
const screenSwitch = document.querySelectorAll(".screens li");

headerCollapse.addEventListener("click", headerCollapseF);

function headerCollapseF() {
  header.classList.toggle("header-set");
  headerCollapse.classList.toggle("header-collapse-set");
}

screenSwitch[0].addEventListener("click", mobileView);
screenSwitch[1].addEventListener("click", tabletView);
screenSwitch[2].addEventListener("click", standardView);

function mobileView() {
  content.style.width = "768px";
  content.style.border = "1px solid black";
}
function tabletView() {
  content.style.width = "1200px";
  content.style.border = "1px solid black";
}
function standardView() {
  content.style.width = "100%";
  content.style.border = "1px solid white";
  
}

Mahdi · Accepted Answer

I have solved my problem by using iframe html tag thanks you all.

can media query changes based on main div width instead of window width?

Answers (1)

Related Questions