CODEWITHSUNDEEP
htmlcssoverflow
user3657227
user3657227

Reputation: 67

how to hide the overflow coming from my corner ribbon div?

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

Upvotes: 2

Views: 764

Answers (1)

Majid
Majid

Reputation: 2890

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

Upvotes: 3

Related Questions