turning transition, with !important value, off on responsive - css

Question

So I got this code for a section in my page that uses a "!important" value on the css to make it work properly but I feel like it might be affecting the responsive side of it. I currently got the section to look properly on small devices but once I click(or hover) anywhere on the section, the section once again goes weird and I can't help but to think that the .projects-others:hover {width: 60% !important;} is behind it since it won't let me turn the transition off. How can I take it off for small devices but keep it on regular size? I've even tried putting the !important value on the transition queries but still no luck.
/*project section starts*/
.projects {
overflow: hidden;
height: 27em;
margin-top: 50px;
border: ;
}
.projects a {
cursor: default;
}
.box {
box-sizing: border-box;
box-shadow: 1.1px 1.2px #595959;
}
.projects h1 {
font-size: 4.40em;
text-align: center;
text-shadow: 0 3px 3px rgba(0, 0, 0, 0.9);
font-family: 'Dancing Script', cursive;
line-height: 80px;
padding-top: 2px;
}
.projects-others,
.projects-coding {
width: 50%;
-moz-transition: width .3s;
-webkit-transition: width .3s;
-o-transition: width .3s;
transition: width .3s;
height: 27em;
padding: 1em;
box-sizing: border-box;
}
.projects-others {
float: right;
background: #00004d;
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
.projects-coding {
background: white;
border-right: ;
}
.projects:hover .projects-others {
width: 40%;
}
.projects-coding:hover {
width: 60%;
}
/*the code that I think is causing the problem*/
.projects-others:hover {
width: 60% !important;
}
.projects-others:hover~.projects-coding {
width: 40%;
}
/*courosel section starts*/
.slideshow-container {
max-width: 1000px;
height: 7.5em;
position: relative;
margin: 7.5px auto;
}
.mySlides,
.mySlides2 {
display: none;
}
.project-text {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
font-family: 'Inknut Antiqua', serif;
}
.slideshow-img {
width: 17.4rem;
height: 10.5rem;
border-radius: 5px;
box-shadow: 2.5px 2.5px 2px rgba(0, 0, 0, 0.7);
-webkit-transition: display 1s;
transition: all 1s;
}
.slide-hover-p {
display: none;
}
.slideshow-img:hover+.slide-hover-p {
display: block;
}
.fade-car {
-moz-animation-name: fade-car;
-webkit-animation-name: fade-car;
-moz-animation-duration: 2.5s;
-webkit-animation-duration: 2.5s;
}
.previous,
.nexxt {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: ;
font-weight: bold;
font-size: 28px;
transition: 0.85s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.nexxt {
right: 0;
border-radius: 3px 0 0 3px;
}
.previous:hover,
.nexxt:hover {
cursor: pointer;
}
#p-others:hover,
#n-others:hover {
background-color: white;
color: #00004d;
}
#p-coding:hover,
#n-coding:hover {
background-color: #00004d;
color: white;
}
/*courosel media queries*/
#-webkit-keyframes fade-car {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
#keyframes fade-car {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
#media only screen and (max-width: 300px) {
.previous,
.nexxt,
.text {
font-size: 11px
}
}
#coding-github-btn {
font-size: 1.35em;
font-weight: 400;
background: #00004d;
border: 1px solid #00004d;
transition: all 0.9s;
cursor: pointer;
}
#coding-github-btn:hover,
#coding-github-btn:focus {
background: white;
border: 1px solid #00004d;
color: #00004d;
}
#others-etsy-btn {
font-size: 1.175em;
font-weight: 500;
background: #ffdb4d;
border: 1px solid #ffdb4d;
transition: all 0.6s;
color: #00004d;
cursor: pointer;
}
#others-etsy-btn:hover,
#others-etsy-btn:focus {
opacity: 0.7;
}
/*media queries for section*/
#media only screen and (max-width: 575px) {
.projects {
height: auto;
-moz-transition: none;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
.projects a {
transition: none;
}
.projects-others, .projects-coding {
-moz-transition: none;
-webkit-transition: none;
-o-transition: none;
transition: none;
height: auto;
width: 100%;
max-width: 100%;
flex: 100%;
}
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Inknut+Antiqua|Dancing+Script|Courgette&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="profile-css/profile-stylesheet.css" type="text/css" />
<link rel="stylesheet" href="profile-css/mq-stylesheet.css" type="text/css" />
</head>
<body>
<!--project section headings-->
<div class="projects">
<a>
<div class="box projects-others" style="color: #ffdb4d;">
<h1 style="color: #ffdb4d;">Projects :<br> Others</h1>
<!--slider starts-->
<div class="slideshow-container">
<div class="mySlides fade-car">
<div class="project-text">
<img src="images/colorado_view2.jpg" class="slideshow-img img-fluid" alt="global6" />
<p class="slide-hover-p"><i>(My Profile Webpage)</i></p>
</div>
</div>
<div class="mySlides fade-car">
<div class="project-text">
<img src="images/global (35).jpg" class="slideshow-img img-fluid" alt="global6" />
<p class="slide-hover-p"><i>(My Profile Webpage)</i></p>
</div>
</div>
<div class="mySlides fade-car">
<div class="project-text">
<img src="images/global (35).jpg" class="slideshow-img img-fluid" alt="global6" />
<p class="slide-hover-p"><i>(My Profile Webpage)</i></p>
</div>
</div>
<a id="p-others" class="previous" onclick="plusSlides(-1)">❮</a>
<a id="n-others" class="nexxt" onclick="plusSlides(1)">❯</a>
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<!--slideshow ends-->
<br><br>
<div class="w-100 text-center">
<a id="others-etsy-btn" href="#" class="btn" role="button">My Etsy Store <span class="fa fa-etsy"></span></a>
</div>
</div>
</a>
<a>
<div class="box projects-coding" style="color:#00004d;">
<h1 style="color:#00004d;">Projects :<br> Coding</h1>
<!--second slider starts-->
<div class="slideshow-container">
<div class="mySlides2 fade-car">
<div class="project-text">
<img src="images/global (35).jpg" class="slideshow-img img-fluid" alt="global6" />
<p class="slide-hover-p"><i>(My Profile Webpage)</i></p>
</div>
</div>
<div class="mySlides2 fade-car">
<div class="project-text">
<img src="images/global (35).jpg" class="slideshow-img img-fluid" alt="global6" />
<p class="slide-hover-p"><i>(My Profile Webpage)</i></p>
</div>
</div>
<div class="mySlides2 fade-car">
<div class="project-text">
<img src="images/global (35).jpg" class="slideshow-img img-fluid" alt="global6" />
<p class="slide-hover-p"><i>(My Profile Webpage)</i></p>
</div>
</div>
<a id="p-coding" class="previous" onclick="plusSlides2(-1)">❮</a>
<a id="n-coding" class="nexxt" onclick="plusSlides2(1)">❯</a>
<span class="dot2" onclick="currentSlide2(1)"></span>
<span class="dot2" onclick="currentSlide2(2)"></span>
<span class="dot2" onclick="currentSlide2(3)"></span>
</div>
<!--slider ends-->
<br><br>
<div class="w-100 text-center">
<a id="coding-github-btn" href="#" class="btn" role="button">My Repositories <span class="fa fa-github"></span></a>
</div>
</div>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script><!-- Popper JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><!-- Latest compiled bootstrap JavaScript -->
</body>
</html>

Answer 1

Placing a media query at the bottom of your css file with the same class and using important as well would definitely fix this.