Grow your CSS skills. Land your dream job.

Centering Overlapping Badge In Header + Responsive Design

  • # March 11, 2013 at 12:37 am

    Hey, two specific questions concerning this web app in progress:
    http://www.petebunke.com/bitcointest/index.php

    1) I’m trying to center that BP badge in the header, but have the width of the banner/header be more narrow than the badge itself. This is the Illustrator mockup of what it SHOULD look like:
    http://petebunke.com/bitcointest/img/bitcoin_mockup.jpg

    Is it possible to nest it within the header div and still have it break out, or is it more practical to put in a different div altogether and just position it manually? I’ve tried to do the latter, but it breaks Bootstrap’s responsive navbar and the text doesn’t link/a:hover properly, which brings me to my next point:

    2) The text in the header (and the spacing/line-height of some of the divs) look awful when the window is sized down to a phone’s dimensions, so I’m wondering if it’s possible for the text to be underneath. Mockup here:
    http://www.petebunke.com/bitcointest/img/bitcoinmobile.jpg

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".