Итак, я получил этот код для раздела на моей странице, который использует значение "! Important" в css, чтобы заставить его работать должным образом, но я чувствую, что это может повлиять на его адаптивную сторону. В настоящее время у меня есть секция, которая хорошо выглядит на небольших устройствах, но как только я щелкаю (или зависаю) в любом месте секции, секция снова становится странной, и я не могу не думать, что за ней стоит .projects-others:hover {width: 60% !important;}
, так как она выиграла не дай мне выключить переход. Как я могу снять его для небольших устройств, но сохранить его на обычном размере? Я даже пытался указать значение! Important в запросах перехода, но все равно не повезло.
/*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%;
}
}