Zeu Zeu - 1 month ago 7
CSS Question

hide side scroll menu on mobile devices

I have a scroll menu and i want on mobiles to be hidden and to be visible only on desktops but i don't know how to do that, some help appreciated. Thanks! Here is my menu codes:

Css menu scroll code:

#iconuri_oferte_useri {
float: right;
position: absolute;
}
.iconuri_dreapta_oferte_useri {
vertical-align: middle;
padding: 2px;
margin-top: 85px;
right: 2px;
z-index: 2;
width: 80px;
background-color: #fff;
border-radius: 20px 0 0 20px;
border-bottom: 1px solid #069;
border-top: 1px solid #069;
border-left: 1px solid #069;
}
.iconuri_dreapta_oferte_useri .originale_icon, .iconuri_dreapta_oferte_useri .transport_icon, .iconuri_dreapta_oferte_useri .livrare_icon, .iconuri_dreapta_oferte_useri .transport_retur, .iconuri_dreapta_oferte_useri .plata_rate, .iconuri_dreapta_oferte_useri .plata_card, .iconuri_dreapta_oferte_useri.icon_garantie {
border-bottom: 1px solid #069;
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
margin-bottom: 5px;
}
.iconuri_dreapta_oferte_useri i {
font-size: 40px;
text-align: center;
width: 100%;
color: #069;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iconuri_dreapta_oferte_useri .title {
font-size: 13px;
text-align: center;
width: 100%;
font-weight: 700;
color: #069;
}
.iconuri_dreapta_oferte_useri .descriere {
font-size: 10px;
text-align: center;
width: 100%;
color: #f60;
line-height: 9px;
padding-bottom: 2px;
}


Html menu scroll code:

<div class="iconuri_dreapta_oferte_useri" id="iconuri_oferte_useri" style="top: 82px;">
<div class="originale_icon"><i class="fa fa-check"></i> <div class="title">PRODUSE ORIGINALE</div> <div class="descriere">Produse originale, verificate</div></div>
<div class="transport_icon"><i class="fa fa-truck"></i> <div class="title">TRANSPORT</div> <div class="descriere">Gratuit pentru comenzi peste 150 Lei</div></div>
<div class="livrare_icon"><i class="fa fa-clock-o"></i> <div class="title">LIVRARE</div> <div class="descriere">In 24 ore, acoperire nationala</div></div>
<div class="transport_retur"><i class="fa fa-rotate-right"></i> <div class="title">RETUR</div> <div class="descriere">In 14 zile de la data livrarii </div></div>
<div class="plata_card"><i class="fa fa-money"></i> <div class="title">PLATI</div> <div class="descriere">Ramburs si card de credit </div></div>
<div class="icon_garantie"><i class="fa fa-empire"></i> <div class="title">GARANTIE</div> <div class="descriere">30 de zile pentru orice produs </div></div>
</div>

Answer

You're probably looking for media queries.

@media (max-width:600px){
  .iconuri_dreapta_oferte_useri{
    display:none;
  }
}