In css, the #media doesn't effect ID elements - html

Question

I'm building a website for a doctor, and he has some videos in YouTube he wanted me to add to his page. now it was really difficult for me to arrange the <frame> element properly so on mobile devices it would look good. I discovered the #media line in css, and I put all the frames I wanted to move in a div with an ID so on device all these frames would align vertically and on desktop view it would look horizontal.
**#div-frame {
** position: relative;
padding-top: 60px;
padding-right: 69%;
bottom: 1140px;
margin-bottom: -1250px;
line-height: 140px;
}
#media only screen and (max-width: 1024px) {
.div-frame {
position: relative;
padding-top: 60px;
line-height: 140px;
}
.footer {
padding-top: 50px;
padding-bottom: 50px;
background: #00ff21;
}
}
<section id="about" class="sections3" style="padding-top:150px; padding-bottom:300px; margin-top: 0px ;">
<div class="container">
<div class="row">
<div class="about-wrapper">
<div class="col-s-9" style="">
<h4 style="font-size:30px;" dir="rtl">
סרטוני הסברה של ד"ר רם ירון
</h4>
<div class="about-content text-right">
<div class="about-photo">
<iframe width="560" height="315" src="https://www.youtube.com/embed/u07pee-IsgI" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
<div class="about-photo" style="position: relative; padding-top:60px; ">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ZTtNxfluyRo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="about-photo" style="position: relative; padding-top:60px; ">
<iframe width="560" height="315" src="https://www.youtube.com/embed/LvPLpGe2qCw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="div-frame">
<iframe width="560" height="315" src="https://www.youtube.com/embed/VonyJSD8yVA" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/upEUJkur7Co" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/jjtBwdPusa8" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
The css^ (the footer does work)
The id I'm trying to implement the change called id:"div-frame"
It's not repetitive (as I tried to change it to class as well.)
What can I do?