I have an html page with text and vertical contacts on the right side of the page. I want to use media queries to put the contacts (EMAIL INSTAGRAM FACEBOOK) horizontal only when the page is viewed from mobile devices.

This is the css that makes the contacts vertical:

.wrapper {
    position: absolute;
    transform: rotate(90deg) translate(0, 10px);
    transform-origin: left bottom;
    width: 100vh;
    top: 100px;
    padding-right:10px;
}
<div class="wrapper">
    <a class="contact" href="#">INSTAGRAM</a>
    <a class="contact" href="#">EMAIL</a>
    <a class="contact" href="#">CREDITS</a>
</div>      

3 Answers

0
Vinzzz On Best Solutions

Why not think the other way around. Always make the text horizontal. And only for larger screens do to transform?

@media (min-width: 1025px) and (max-width: 1280px) {

  .wrapper { 
     transform: rotate(90deg) translate(0, 10px);
     transform-origin: left bottom;
  }

}

Like a mobile first approach.

0
Optimum Creative On

Below Code example will do your job.

.wrapper {
        position: absolute;
        transform: rotate(90deg) translate(0, 10px);
        transform-origin: left bottom;
        width: 100vh;
        top: 100px;
        padding-right:10px;
    }
    
 /* Above CSS will work on all screens*/   
 
 /* Below css will work only on devices smaller than 767px wide */

@media(max-width:767px){
  .wrapper {
        position: absolute;
        transform: none;
        transform-origin: left bottom;
        width: 100vh;
        top: auto;
        padding-right:0px;
    }
}
<div class="wrapper">
    <a class="contact" href="#">INSTAGRAM</a>
    <a class="contact" href="#">EMAIL</a>
    <a class="contact" href="#">CREDITS</a>
  </div>  

0
David Hänni On

I would do it the other way around "mobile-first"

.wrapper {
  position: absolute;

  transform-origin: left bottom;
  width: 100vh;
  top: 100px;
  padding-right:10px;


}

@media screen and (min-width: 960px) {
  .wrapper {
    transform: rotate(90deg) translate(0, 10px);
  {
}