How change css dinamically by orientation device

ionic-v1
1

Hi, I have two button icon that change position depending on the screen orientation (landscape or portrait), how do I always have icons in the same position?

CSS

a#spunta.icon:before { 
  margin-left: 14em; color: green; transform: translate3d(0px,0px,0px) !important;
  -webkit-transform: translate3d(0px,0px,0px) !important; 
}
a#spunta.icon-left:before { 
  margin-left: 4em; color: green; transform: translate3d(0px,0px,0px) !important;
  -webkit-transform: translate3d(0px,0px,0px) !important; 
}


a#spuntaRif.icon:before { 
  transform: translate3d(0px,0px,0px) !important;
  -webkit-transform: translate3d(0px,0px,0px) !important; 
}
a#spuntaRif.icon-left:before { 
  transform: translate3d(0px,0px,0px) !important;
  -webkit-transform: translate3d(0px,0px,0px) !important; 
}

HTML

div style=“border-top: 1px solid #FF6600; border-bottom: 1px solid #FF6600;”>
a class=“button button-icon icon ion-checkmark-circled” id=“spunta” ng-click=“updateApprovata();goArchive();goDettaglio()”>
/a>
a class=“button button-icon icon ion-close-circled” id=“spuntaRif” ng-click=“updateRifiutata();goArchive();goDettaglio()”>
/a>
/div>

2

SOLVED…

/* portrait /
@media screen and (orientation:portrait) {
/ portrait-specific styles */
a#spunta.icon:before {
padding-left: 7em; color: green; transform: translate3d(0px,0px,0px) !important;
-webkit-transform: translate3d(0px,0px,0px) !important;
}
a#spunta.icon-left:before {
padding-left: 2em; color: green; transform: translate3d(0px,0px,0px) !important;
-webkit-transform: translate3d(0px,0px,0px) !important;
}

a#spuntaRif.icon:before {
transform: translate3d(0px,0px,0px) !important;
-webkit-transform: translate3d(0px,0px,0px) !important;
}
a#spuntaRif.icon-left:before {
transform: translate3d(0px,0px,0px) !important;
-webkit-transform: translate3d(0px,0px,0px) !important;
}

}
/* landscape /
@media screen and (orientation:landscape) {
/ landscape-specific styles */
a#spunta.icon:before {
padding-left: 14.5em; color: green; transform: translate3d(0px,0px,0px) !important;
-webkit-transform: translate3d(0px,0px,0px) !important;
}
a#spunta.icon-left:before {
padding-left: 4em; color: green; transform: translate3d(0px,0px,0px) !important;
-webkit-transform: translate3d(0px,0px,0px) !important;
}

a#spuntaRif.icon:before {
transform: translate3d(0px,0px,0px) !important;
-webkit-transform: translate3d(0px,0px,0px) !important;
}
a#spuntaRif.icon-left:before {
transform: translate3d(0px,0px,0px) !important;
-webkit-transform: translate3d(0px,0px,0px) !important;
}

}

just in the css

2 Likes