CSS Responsive Shape Issue

Question

I added a fixed top search and social bar to my website and all looks fantastic on desktop. It should be responsive, however, I'm having a problem on mobile viewing (tablets/phones, etc.) where it's losing its shape.

The bar itself works great, as does the search part. It's the social css part that's causing the shape to fail on mobile viewing.

Here's what it should look like:

Here's how it looks on mobile:

Here's the coding:

.topbar .social {
    float: right;
    display: inline-block;
    margin-left: 15px;
    margin-top: -30px;
    margin-bottom: -60px;
}
.topbar .social a {
    display: inline-block;
    width: 34px;
    height: 60px;
    padding-top: 8px;
    position: relative;
    background-color: #f293b5;
    float: left;
    color: #fff;
    font-size: 18px;
    text-align: center;
    margin-left: 5px;
}
.topbar .social a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0; 
    border: solid transparent;
    width: 0;
    height: 0;
    pointer-events: none;
    border-bottom: 13px solid #fff;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
}

All code and HTML can be found here: http://jsfiddle.net/20tL16v3/ (ignore the additional Wordpress extras, such as it showing the widget extras.)

This is driving me crazy! Can anyone help me correct this, or point me in the direction of where I may be going wrong? Thanks in advance.

Answer 1

You have a media query that sets your header's overflow to hidden.

@media only screen and (max-width: 1139px) {
  .site-inner, .wrap {
    max-width: 960px;
    overflow: hidden;
    }
}

Set that to overflow: visible; and you should see your ribbons the way you want them to be seen as when you shrink your window.

In the event where you can't find that media query, just set this somewhere in your css if you're desperate: .site-inner, .wrap { overflow: visible !important; }