0
Hello!
I’m doing a Hover effect on my project (Assigning a CSS style to a specific element within a div), in boxes, that when I step the mouse it expands and displays a text and a button that did not exist before the effect happens.
The problem is that when I change the site to the version mobile, these effects of appearing text and the button are happening endlessly. They should not even appear in the mobile version, Livias.
The code: https://jsfiddle.net/brikohler/86rgnsLx/16/
Can anyone tell me how to undo these effects?
@media only screen and (min-device-width: 2px) and (max-device-width: 736px) {
.div-forum-ideas-text {
display: none;
}
.div-forum-ideas .div-forum-ideas-forum-card {
margin-left: 5.32%;
width: 43.40%;
height: 49.84%;
}
.div-rectangle-main{
width: 100%;
height: 100%;
left: 100%;
margin-top: -46px;
background: linear-gradient(192deg, #3D4554 -10.36%, #242B36 45.63%, #1D1D1D 117.21%);
}
.div-rectangle-main .main-subtitle{
font-family: Nunito Sans;
font-style: normal;
font-weight: normal !important;
color: #FFFFFF;
margin-top: 30px;
margin-bottom: 100px !important;
font-size: 1.25rem;
line-height: 200%;
text-align: center;
}
.div-rectangle-main .main-subtitle .main-subsubtitle{
display: none;
}
.div-rectangle-main .main-title{
padding-top: 10%;
}
.div-rectangle-main .main-logo{
display: none !important;
}
.flexbox-container {
flex-direction: column;
flex-wrap: wrap;
flex: 1 0 26%;
}
.flexbox-container .card-home-main:nth-of-type(1){
margin-top: -12% !important;
margin-left: 6% !important;
}
.flexbox-container .card-home-main{
background: #FFFFFF;
margin-top: 7% !important;
width: 91% !important;
height: 160px !important;
}
.div-forum-ideas .div-forum-ideas-ideas-card {
margin-left: 51.28%;
width: 43.40%;
height: 49.84%;
}
.div-forum-ideas-forum-card .section-icon-circle-forum-ideas-card {
margin-top: 14.28%;
margin-left: 20%;
float: none;
}
.div-forum-ideas-ideas-card .section-icon-circle-forum-ideas-card {
margin-top: 14.28%;
margin-left: 20%;
float: none;
}
.div-forum-ideas-forum-card .div-forum-ideas-card-title {
margin-left: auto;
text-align: center;
}
.div-forum-ideas-ideas-card .div-forum-ideas-card-title {
margin-left: auto;
text-align: center;
}
.div-forum-ideas-card-text {
display: none;
}
.card-home-main .card-img{
height: 0% !important;
width: 0% !important;
margin-left: 3% !important;
margin-top: 9% !important;
}
.section-icon-circle-card {
border-radius: 100%;
width: 90px !important;
height: 90px !important;
padding: 18px;
margin-top: 0% !important;
margin-bottom: 0% !important;
margin-left: 0% !important;
margin-right: 0% !important;
}
.card-home-main .card-info{
display: flex;
flex-direction: column;
margin-top: -7%;
margin-left: 3%;
}
.card-home-main .card-title{
position: relative;
font-family: Nunito Sans;
font-style: normal;
font-weight: bold;
width: auto !important;
font-size: 1.25rem;
line-height: 100%;
color: #2CC3D5;
text-align: center;
}
.card-home-main .card-text{
display: none !important;
}
.card-home-main .card-text-mobile{
display: flex !important;
position: relative;
font-family: Nunito Sans;
font-style: normal;
font-weight: normal;
font-size: 0.75rem;
word-wrap: normal !important;
width: 55%;
margin-left: 30%;
margin-top: 0%;
line-height: 16px;
color: #3D4554;
}
.card-home-main .card-info .card-icon{
display: none !important;
}
}
.div-rectangle-main{
width: 100%;
height: 100%;
left: 100%;
top: 492px;
background: linear-gradient(192deg, #3D4554 -10.36%, #242B36 45.63%, #1D1D1D 117.21%);
}
.div-rectangle-main .main-logo{
display: block;
padding-top: 79px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0%;
width: 250px;
}
.div-rectangle-main .main-title{
font-family: Nunito Sans;
font-style: normal;
font-weight: 800;
margin-top: 36px;
font-size: 40px;
line-height: 55px;
text-align: center;
color: #2CC3D5;
}
.div-rectangle-main .main-subtitle{
font-family: Nunito Sans;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
margin-top: 20px;
margin-bottom: 200px;
font-size: 1.25rem;
line-height: 200%;
text-align: center;
}
.div-rectangle-main .main-subtitle .main-subsubtitle{
font-weight: normal;
}
.flexbox-container {
display: flex;
justify-content: center;
align-items: start;
}
.flexbox-container .card-home-main{
width: 18%;
margin-top: -9%;
margin-left: 5.8%;
background: #FFFFFF;
border: 1px solid #EAEEEE;
box-sizing: border-box;
box-shadow: 0px 4px 4px rgba(51, 51, 51, 0.15);
border-radius: 8px;
display: flex;
flex-direction: column;
transition: 400s ease;
margin-bottom: 20%;
}
.flexbox-container .card-home-main:nth-of-type(1){
margin-left: 0.8%;
}
.card-home-main .card-img{
height: auto;
width: auto;
margin-left: 25%;
margin-top: 10%;
}
.section-icon-circle-card {
border-radius: 100%;
width: 108px;
height: 108px;
padding: 18px;
margin-top: 4.95%;
margin-bottom: 4.95%;
margin-left: 6.42%;
}
.section-icon-circle-card--bot{
background: rgba(44, 195, 213, 0.2);
}
.section-icon-circle-card--watermelon{
background: rgba(246, 102, 137, 0.2)
}
.section-icon-circle-card--warning{
background: rgba(255, 207, 51, 0.2);
}
.card-home-main .card-info{
float: left;
height: 100%;
width: 100%;
max-width: 100% !important;
padding-top: 0%;
overflow: auto;
}
.card-home-main .card-info .card-title{
font-family: Nunito Sans;
font-style: normal;
font-weight: bold;
font-size: 1.5rem;
line-height: 120%;
color: #607B99;
width: 50%;
margin-left: 25%;
margin-bottom: 18%;
text-align: center;
}
.card-home-main .card-info .card-icon{
margin-left: 40%;
}
.card-home-main .card-info .card-text{
display: none;
}
.flexbox-container .card-home-main:hover{
height: 420px;
}
.flexbox-container .card-home-main:hover > .card-info .card-icon{
display: none;
}
.flexbox-container .card-home-main:hover > .card-info .card-text{
display: block;
font-family: Nunito Sans;
font-style: normal;
font-weight: normal;
font-size: 0.75rem;
line-height: 120%;
color: #738192;
width: fit-content;
text-align: center;
margin-left: 20%;
margin-right: 20%;
margin-top: -10%;
}
.flexbox-container .card-home-main:hover > .card-info .card-button{
display: block;
margin-bottom: 0%;
text-align: center;
background: #2CC3D5;
color: #FFFFFF;
font-family: Nunito Sans;
font-style: normal;
font-weight: bold;
font-size: 12px;
line-height: 16px;
text-align: center;
margin-top: 17%;
border-radius: 0px 0px 8px 8px;
padding: 20px;
}
.card-home-main .card-info .card-text-mobile{
display: none;
}
.card-home-main .card-info .card-button{
display: none;
} <div>
<div class="div-rectangle-main">
<h1 class="main-title"> Lore lore lore!</h1>
<div class="main-subtitle">
Lore lore lore
<p class="main-subsubtitle">Lore lore lore lore =)</p>
</div>
</div>
<div class="flexbox-container">
<div class="card-home-main" id="card1">
<div class="card-img">
<div class="section-icon-circle-card section-icon-circle-card--bot">
<img src="img/illustrations/Estrela-1.svg"/>
</div>
</div>
<div class="card-info">
<div class="card-title">
<h3>B</h3>
</div>
<p class="card-text">Lore lore lore
<div class="card-icon">
<BlipIcon name="arrow-ball-down-solid" class="bp-fs-1 bp-fill-bot"></BlipIcon>
</div>
<p class="card-text-mobile">lore lore lore </p>
</div>
</div>
<div class="card-home-main" id="card2">
<div class="card-img">
<div class="section-icon-circle-card section-icon-circle-card--watermelon">
<img src="img/illustrations/Estrela-2.svg"/>
</div>
</div>
<div class="card-info">
<div class="card-title">
<h3>C</h3>
</div>
<div class="card-icon">
<BlipIcon name="arrow-ball-down-solid" class="bp-fs-1 bp-fill-bot"></BlipIcon>
</div>
<p class="card-text">lore lore lore lore </p>
<p class="card-text-mobile">lore lore lore 2 </p>
</div>
</div>
<div class="card-home-main" id="card3">
<div class="card-img">
<div class="section-icon-circle-card section-icon-circle-card--warning">
<img src="img/illustrations/Estrela-3.svg"/>
</div>
</div>
<div class="card-info">
<div class="card-title">
<h3>D </h3>
</div>
<div class="card-icon">
<BlipIcon name="arrow-ball-down-solid" class="bp-fs-1 bp-fill-bot"></BlipIcon>
</div>
<p class="card-text">lore lore lore </p>
<p class="card-text-mobile">lore lore lore2</p>
</div>
</div>
</div>
</div>
Cara edits your question. Put exactly the code you are currently using, it will make it easy to answer you
– hugocsl
sorry! I put
– Bruno Camarda