Photoshop Question posted in
The official user guide can be found here.

How to build a responsive slanted layout? – Photoshop

I am preparing a new layout with slanted elements that should be responsive in any way.
What I currently have does look good on default desktop and mobile, but if the screen is larger, the layout is being ruined: e.g. on my 32" screen the text is starting outside the container elements, right before the slanted elements. That should not happen.

main {
  font-family: Arial;
}

.content_nocolor {
  padding: 60px 40px 40px 40px;
}

.content__slant1 {
  position: relative;
  padding: 40px 40px 120px 40px;
  overflow: hidden;
  filter: drop-shadow(0px 40px 0px #f2f2f2);
}
.content__slant1:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #004B4F;
  -webkit-transform: skewY(-3deg);
  -moz-transform: skewY(-3deg);
  -ms-transform: skewY(-3deg);
  -o-transform: skewY(-3deg);
  transform: skewY(-3deg);
  transform-origin: top left;
}
.content__slant1 h1, .content__slant1 p {
  position: relative;
  color: #ffffff;
}
.content__slant1 h1 a, .content__slant1 p a {
  color: inherit;
}

.content__slant2 {
  position: relative;
  padding: 120px 40px 40px 40px;
  overflow: hidden;
  filter: drop-shadow(0px calc(-1*40px) 0px #f2f2f2);
}
.content__slant2:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #F89300;
  /* background-image: linear-gradient(#ff9d2f, #ff6126); */
  -webkit-transform: skewY(-3deg);
  -moz-transform: skewY(-3deg);
  -ms-transform: skewY(-3deg);
  -o-transform: skewY(-3deg);
  transform: skewY(-3deg);
  transform-origin: bottom right;
}
.content__slant2 h1, .content__slant2 h3, .content__slant2 p {
  position: relative;
  color: #000000;
}
.content__slant2 h1 a, .content__slant2 h3 a, .content__slant2 p a {
  color: inherit;
}

.content__slant3 {
  position: relative;
  padding: 0 40px 140px 40px;
  overflow: hidden;
  filter: drop-shadow(0px 40px 0px #f2f2f2);
}
.content__slant3:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #F89300;
  /* background-image: linear-gradient(#ff9d2f, #ff6126); */
  -webkit-transform: skewY(3deg);
  -moz-transform: skewY(3deg);
  -ms-transform: skewY(3deg);
  -o-transform: skewY(3deg);
  transform: skewY(3deg);
  transform-origin: bottom right;
}
.content__slant3 h1, .content__slant3 h3, .content__slant3 p {
  position: relative;
  color: #000000;
}
.content__slant3 h1 a, .content__slant3 h3 a, .content__slant3 p a {
  color: inherit;
}
<main class="content">
  <div class="content__slant1">
    <h1>Office ipsum</h1>
    <p>That's great, but we need to add this 2000 line essay make it original, for can it handle a million in one go, yet it needs to be the same, but totally different this looks perfect. Just Photoshop out the dog, add a baby, and make the curtains blue we exceed the clients' expectations this is just a 5 minutes job.</p>
    <p>
      What you've given us is texty, we want sexy something summery; colourful make it look like Apple. Can you make it faster? the animation does not work, when i print the page or can you punch up the fun level on these icons give us a complimentary logo along with the website, nor thanks for taking the time to make the website, but i already made it in wix.
    </p>
  </div>
  
  <div class="content_nocolor">
  <p>There is too much white space why is a 15mb gif on the startpage a bad idea?!, yet you can get my logo from facebook.     </p>
  <p>
    That's great, but we need to add this 2000 line essay it needs to be the same, but totally different so there are more projects lined up charge extra the next time.
  </p>
  </div>
  
  <div class="content__slant2">
    <h1>... continues ...</h1>
    <p>
      We try your eye, but can you change everything? submit your meaningless business jargon to be used on the site!, but that will be a conversation piece this red is too red can you pimp this powerpoint, need more geometry patterns I have an awesome idea for a startup, i need you to build it for me. The flier should feel like a warm handshake. The animation does not work, when i print the page you might wanna give it another shot, or can you turn it around in photoshop so we can see more of the front can you make the blue bluer? jazz it up a little, can you please send me the design specs again?
    </p>
    <p>
        I know somebody who can do this for a reasonable cost. Anyway, you are the designer, you know what to do can you make the logo bigger yes bigger bigger still the logo is too big can you use a high definition screenshot, in an ideal world. Remember, everything is the same or better in an ideal world can you please send me the design specs again?
    </p>
    <h3>Thats not what i saw in my head at all!!</h3>
  </div>
  
  
  <div class="content__slant3">
    <h1>... and so it ends.</h1>
  </div>  
    
</main>
Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0 
    @media screen and (min-width: 1200px) {
  .content__slant1 {
    padding: 40px 40px 120px 40px;
  }
  .content__slant2 {
      padding: 180px 40px 0px 40px;
  }
  .content__slant3 {
      padding: 0 40px 180px 40px;
  }
}

    did the trick


  2. 0

    use media query => @media in css.

    Login or Signup to reply.
  3. 0

    Use media query, use min width and max width.

    * {
  box-sizing: border-box;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
    .row {   
        flex-direction: column;
        opacity:0.90; filter:alpha(opacity=90);
    }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
    .navbar a {
        float: none;
        width: 100%;
    }
´´´

Or something like that, my code does not correspond to your example but try.
    Login or Signup to reply.
  4. 0

    answer made from earlier comment to make it visible to anyone:

    it uses clip-path instead transform and value is taken from a CSS var() to update the path and the padding at the same time.

    Live exemple describing the idea :

    html {/* set here your min and max value for the slanted clip-path and padding values */
  --pad:clamp( 15px, calc(10vw - 30px) ,60px);
  /*           min       if valid       max  */
}

body {
  padding: 0 0 200px 0;
  margin: 0;
  background: transparent url("https://images.unsplash.com/photo-1622495546323-5dac33dedb01?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2167&q=80") no-repeat fixed;
  background-size: cover;
}

main {
  font-family: Arial;
    filter:
      drop-shadow(0px 20px 0px #f2f2f2) 
      drop-shadow(0px -20px 0px #f2f2f2)
      drop-shadow(20px 0px 1px #f2f2f2)
      drop-shadow(-20px 0px 1px #f2f2f2)  ;
}

.content_bgWhite {
  background-color: #ffffff;
}

.content_bgSemitrans {
  background-color: rgba(255, 255, 255, 0.25);
  display: inline-block;
  padding: 0px 20px;
 text-align:left;
}

.content_bgTransparent {
}

.content_noslant {
  padding: 60px ;
  text-align:center
}

.content__slant1 {
  --pad: calc(20px + 5vw);
  background:#004B4F;
  padding: 40px 40px var(--pad) 40px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pad) ), 0% 100%);

}

.content__slant1 h1, .content__slant1 p {
  position: relative;
  color: #ffffff;
}
.content__slant1 h1 a, .content__slant1 p a {
  color: inherit;
}

.content__slant2 {  
  background:#F89300;
  position: relative;
  padding: var(--pad) 40px 1px 40px;
  clip-path: polygon(0 0, 100% var(--pad), 100% 100%, 0% 100%);

}
.content__slant2 h1, .content__slant2 h3, .content__slant2 p {
  position: relative;
  color: #000000;
}
.content__slant2 h1 a, .content__slant2 h3 a, .content__slant2 p a {
  color: inherit;
}

.content__slant3 {
  background:#F89300;
  padding: 1px 40px var(--pad) 40px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pad) ), 0% 100%);
}
.content__slant3 h1, .content__slant3 h3, .content__slant3 p {
  position: relative;
  color: #000000;
}
.content__slant3 h1 a, .content__slant3 h3 a, .content__slant3 p a {
  color: inherit;
}
    <main class="content">
  <div class="content__slant1">
    <h1>Office ipsum</h1>
    <p>That's great, but we need to add this 2000 line essay make it original, for can it handle a million in one go, yet it needs to be the same, but totally different this looks perfect. Just Photoshop out the dog, add a baby, and make the curtains blue we exceed the clients' expectations this is just a 5 minutes job.</p>
    <p>
      What you've given us is texty, we want sexy something summery; colourful make it look like Apple. Can you make it faster? the animation does not work, when i print the page or can you punch up the fun level on these icons give us a complimentary logo along with the website, nor thanks for taking the time to make the website, but i already made it in wix.
    </p>
  </div>
  
  <div class="content_noslant content_bgTransparent">
        <div class="content_bgSemitrans">
              <p>
                <b> I'm so sensible, i'm getting touch by that filter too.</b>
              </p>
              <p>
                  That's great, but we need to add this 2000 line essay it needs to be the same, but totally different so there are more projects lined up charge extra the next time.
              </p>
         </div>
  </div>
  
  <div class="content__slant2">
    <h1>... continues ...</h1>
    <p>
      We try your eye, but can you change everything? submit your meaningless business jargon to be used on the site!, but that will be a conversation piece this red is too red can you pimp this powerpoint, need more geometry patterns I have an awesome idea for a startup, i need you to build it for me. The flier should feel like a warm handshake. The animation does not work, when i print the page you might wanna give it another shot, or can you turn it around in photoshop so we can see more of the front can you make the blue bluer? jazz it up a little, can you please send me the design specs again?
    </p>
    <p>
        I know somebody who can do this for a reasonable cost. Anyway, you are the designer, you know what to do can you make the logo bigger yes bigger bigger still the logo is too big can you use a high definition screenshot, in an ideal world. Remember, everything is the same or better in an ideal world can you please send me the design specs again?
    </p>
    <h3>Thats not what i saw in my head at all!!</h3>
  </div>
  
  
  <div class="content__slant3">
    <h1>... and so it ends.</h1>
  </div>  
    
</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search