2

On line 11 of my Codepen (link) I have the following

body{overflow:hidden;}

that was my last attempt to hide the overflow of content to the right side of the body...

A div called ".talk" is positioned absolute to the corner as a ribbon & "call to action"

 .talk{height:50px; width:370px; position:absolute; right:0; top:0; transform:rotate(40deg); margin-right:-100px;}

However 

body{overflow:hidden;}

Hides a lot of content below the first pink icon ... how can I hide the ribbons overflow without affecting the layout of the page?

http://codepen.io/gebrutommy/pen/tLHFh?editors=0100

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
user3657227
  • 69
  • 1
  • 7

1 Answers1

3

Do this change

in your CSS remove body{overflow:hidden;}

add .text{position: relative; overflow: hidden; }

then move talk div to be child of text like 

 <div class="text">
    <div class="mix-text">
      <h1>Gitter</h1>
      <h2>Where developers come to talk</h2>
    </div>
      <div class="talk"><a href="https://gitter.im/tommygebru">LET'S CHAT</a></div>
  </div>

then add to 

.talk { overflow: hidden;}

Done.

Here is live example : http://codepen.io/mhadaily/pen/YGwpZK

Majid
  • 2,507
  • 2
  • 19
  • 18