Search code examples
htmlcssresponsive-designcss-transforms

Rotated Elements with responsive design

I'm trying to create a 90 deg rotated layout. But the problem is that none of the method I used to use works in this case. Since it is rotated, changing size, getting it responsive does not seem to work.

I'm trying to let the "My Project" title take half of the rotated screen and the other half will contain images and containers.

Can anyone help me out with this? How do i make sure that it resizes and placement is always half:half layout without overflow during resize in different device size. Please provide me with a hint to complete my work. Thank you!

Link to the code in jsfiddle.

Here's a link to the think I'm doing: https://jsfiddle.net/7tfy4gdh/1/

Here's what i want to build: https://prnt.sc/10wb1p7

Solution

  • One way to think of this is to design everything as though it was not rotated and with the container having width 100vh and height 100vw. Then when everything is in place, rotate container by 90 degrees and translate it so it exactly fits within the viewport.

    To ensure it is all responsive, use relative units wherever possible. So have widths and heights as %s. Think about padding, possibly define it in terms of vmin and you may also want to define font size relatively so it grows on larger screens.

    So, implement this first:

    enter image description here

    This snippet starts the process, defining a left side div and a right side div, centering the main component of each and rotating and translating the container. It isn't the full job, the logo side needs more work - and you may find defining everything in %s etc that it is better not to use flex but to control the use of the whole space yourself.

    And remember that just because something is rotated it does not mean that its height becomes the vertical side...

    Here's some code to start things off:

    <head>
<style>
* {
    box-sizing: border-box;
    margin:0;
    padding: 0;
    overflow: visible;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: visible;
}

.container {
    text-align: center;
    width: 100vh;
    height: 100vw;
    transform: rotate(90deg) translateY(-100%);
    transform-origin: 0% 0%;
    overflow: hidden;
}
.container .left-side {
  position: relative;
  width: 50vh;
  height: 100vw;
  float: left;
}
.container .left-side .project-title {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.container .project-title span {
    text-align: center;
}
.container .right-side {
  position: relative;
  top: 0;
  width: 50vh;
  height: 100vw;
  float: left;
  padding: 1vmin;
}
.container .right-side .control {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    rmax-width: 450px;
    rmin-width: 350px;
    height: 80%;
    width: 80%;
    background-color: red;
    padding: 5%;
}
.control .logo {
    height: 25%;
}
.control .logo img {
    width:100px;
    height: 100%;
    width: auto;
}
.logo-container {
    flex:1;
    display:flex;
    margin-top: 5%;
    height: 30%;
}
.logo-maker{
    flex:1;
    padding:25px 10px;
    background-color: #ccc;
    color:#ffffff;
    border-radius: 8px;
    padding-top: 15px;
}
.logo-maker .maker-contain {
    width:50px;
    background-color: #ccc;
    border-radius: 8px;
    padding:5px;
    padding-bottom: 0;
    margin:auto;
}
.logo-maker .maker-contain img{
    width:100%;
}
.logo-maker h3 {
    margin-top: 15px;
}

.earn-coin {
    flex:1;
    text-align: center;
    padding:25px 0;
    padding-top: 15px;
    margin-left: 5px;
    border-radius: 8px;
    background-color: #ccc;
    box-shadow: 5px 4px 5px -5px rgba(0,0,0,0.76);
    -webkit-box-shadow: 5px 4px 5px -5px rgba(0,0,0,0.76);
    -moz-box-shadow: 5px 4px 5px -5px rgba(0,0,0,0.76);
}
.earn-coin img {
    width:40px;
    margin:auto;
}
.earn-coin h3{
    margin-top: 15px;
}

.footer {
    padding:20px 30px;
    padding-left: 55px;
    background-color: #ccc;
    background-color: purple;
    height: 25%;
    color:#ffffff;
    border-radius: 5px;
    margin-top: 5%;
    text-align: left;
}
.footer i{
    font-size:35px;
}
.footer h3 {
    display: inline;
    margin-left: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="left-side">
  <div class="project-title">
    <h2>
      My Project
    </h2>
  </div>
  </div>
  <div class="right-side">
  <div class="control">
    <div class="logo">
      <img src="https://d1csarkz8obe9u.cloudfront.net/posterpreviews/lion-fire-logo-design-template-free-89daa14626ac403bd3cf6282036663ff_screen.jpg?ts=1572094154">
    </div>
    <section class="logo-container">
      <div class="logo-maker">
        <div class="maker-contain">
          <img src="https://www.logaster.com/blog/wp-content/uploads/2018/05/LogoMakr.png" alt="">
        </div>
        <h3>Build Logo</h3>
      </div>
      <div class="earn-coin">
        <div class="coin-img">
          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSEWIhIZ48jnuWwHjIZ9I_EpQbRsHrFtomThQ&usqp=CAU">
        </div>
        <h3>Earn Coins</h3>
      </div>
    </section>
    <div class="footer">
      <i class="fa fa-bell"></i>
      <h3>
        Build by Dave ___
      </h3>
    </div>
  </div>
  </div>

</div>
</body>