CODEWITHSUNDEEP
css
Zeu
Zeu

Reputation: 69

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>

Upvotes: 0

Views: 42

Answers (1)

Steven B.
Steven B.

Reputation: 9362

You're probably looking for media queries. 

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

Upvotes: 1

Related Questions