How to make CSS drawn character responsive inside bootstrap column


Tags: html,css,twitter-bootstrap

Problem :

This might be a very foolish question, but is there a way I can make my 8 bit CSS character responsive by placing him within a div in bootstrap? Or does anyone have any suggestions on making the pixels themselves responsive?

I want the character to have the ability to change size when viewed on a mobile device but currently I'm having no luck.

JS Fiddle of the character placed within the div https://jsfiddle.net/jebwp7Ln/

The HTML (b represents the character)

    <header>
            <div class="container">
                <div class="col-md-12">
                    <div class="col-md-8">Hello</div>
                </div>

                <!--Pixel Me Dude -->
                <div class="col-md-4">
                    <div class="b"></div>
                </div> 
           </div>
    </header>

The CSS

.b {
  content: '';
  position: absolute;
  top: 35%;
  left: 30%;
  display: block;
  box-sizing: border-box;
  width: 11px;
  height: 11px;
  box-shadow: 0px 0px transparent, 0px 0px transparent, 11px 0px transparent, 22px 0px transparent, 33px 0px transparent, 44px 0px transparent, 55px 0px transparent, 66px 0px #3a3a3a, 77px 0px #000, 88px 0px #3a3a3a, 99px 0px #000, 110px 0px #000, 121px 0px #000, 132px 0px #000, 143px 0px transparent, 154px 0px transparent, 165px 0px transparent, 176px 0px transparent, 11px 11px transparent, 22px 11px transparent, 33px 11px transparent, 44px 11px transparent, 55px 11px #3a3a3a, 66px 11px #000, 77px 11px #3a3a3a, 88px 11px #000, 99px 11px #000, 110px 11px #000, 121px 11px #000, 132px 11px #000, 143px 11px #000, 154px 11px transparent, 165px 11px transparent, 176px 11px transparent, 187px 11px transparent, 11px 22px transparent, 22px 22px transparent, 33px 22px transparent, 44px 22px #3a3a3a, 55px 22px #000, 66px 22px #3a3a3a, 77px 22px #000, 88px 22px #000, 99px 22px #000, 110px 22px #000, 121px 22px #000, 132px 22px #000, 143px 22px #000, 154px 22px #000, 165px 22px transparent, 176px 22px transparent, 187px 22px transparent, 11px 33px transparent, 22px 33px transparent, 33px 33px #3a3a3a, 44px 33px #000, 55px 33px #3a3a3a, 66px 33px #000, 77px 33px #000, 88px 33px #000, 99px 33px #000, 110px 33px #000, 121px 33px #000, 132px 33px #000, 143px 33px #000, 154px 33px #000, 165px 33px #000, 176px 33px transparent, 187px 33px transparent, 11px 44px transparent, 22px 44px #3a3a3a, 33px 44px #000, 44px 44px #3a3a3a, 55px 44px #000, 66px 44px #000, 77px 44px #000, 88px 44px #000, 99px 44px #000, 110px 44px #000, 121px 44px #000, 132px 44px #000, 143px 44px #000, 154px 44px #000, 165px 44px #000, 176px 44px #000, 187px 44px transparent, 11px 55px transparent, 22px 55px #3a3a3a, 33px 55px #f5cbb6, 44px 55px #f5cbb6, 55px 55px #fadece, 66px 55px #fadece, 77px 55px #fadece, 88px 55px #fadece, 99px 55px #fadece, 110px 55px #fadece, 121px 55px #fadece, 132px 55px #fadece, 143px 55px #fadece, 154px 55px #fadece, 165px 55px #fadece, 176px 55px #000, 187px 55px transparent, 11px 66px transparent, 22px 66px #3a3a3a, 33px 66px #f5cbb6, 44px 66px #f5cbb6, 55px 66px #fadece, 66px 66px #fadece, 77px 66px #fadece, 88px 66px #fadece, 99px 66px #fadece, 110px 66px #fadece, 121px 66px #fadece, 132px 66px #fadece, 143px 66px #fadece, 154px 66px #fadece, 165px 66px #fadece, 176px 66px #000, 187px 66px transparent, 11px 77px transparent, 22px 77px #3a3a3a, 33px 77px #f5cbb6, 44px 77px #f5cbb6, 55px 77px #fadece, 66px 77px #fadece, 77px 77px #fadece, 88px 77px #fadece, 99px 77px #fadece, 110px 77px #fadece, 121px 77px #fadece, 132px 77px #fadece, 143px 77px #fadece, 154px 77px #fadece, 165px 77px #fadece, 176px 77px #000, 187px 77px transparent, 11px 88px transparent, 22px 88px #3a3a3a, 33px 88px #f5cbb6, 44px 88px #f5cbb6, 55px 88px #fadece, 66px 88px #fadece, 77px 88px #fadece, 88px 88px #fadece, 99px 88px #fadece, 110px 88px #fadece, 121px 88px #fadece, 132px 88px #fadece, 143px 88px #fadece, 154px 88px #fadece, 165px 88px #fadece, 176px 88px #000, 187px 88px transparent, 11px 99px transparent, 22px 99px #3a3a3a, 33px 99px #f5cbb6, 44px 99px #3a3a3a, 55px 99px #000, 66px 99px #000, 77px 99px #000, 88px 99px #fadece, 99px 99px #fadece, 110px 99px #fadece, 121px 99px #3a3a3a, 132px 99px #000, 143px 99px #000, 154px 99px #000, 165px 99px #fadece, 176px 99px #000, 187px 99px transparent, 11px 110px transparent, 22px 110px #3a3a3a, 33px 110px #f5cbb6, 44px 110px #fadece, 55px 110px #fadece, 66px 110px #3a3a3a, 77px 110px #fadece, 88px 110px #fadece, 99px 110px #f5cbb6, 110px 110px #fadece, 121px 110px #fadece, 132px 110px #3a3a3a, 143px 110px #fadece, 154px 110px #fadece, 165px 110px #fadece, 176px 110px #000, 187px 110px transparent, 11px 121px transparent, 22px 121px #fadece, 33px 121px #f5cbb6, 44px 121px #fadece, 55px 121px #fadece, 66px 121px #fadece, 77px 121px #fadece, 88px 121px #fadece, 99px 121px #f5cbb6, 110px 121px #fadece, 121px 121px #fadece, 132px 121px #fadece, 143px 121px #fadece, 154px 121px #fadece, 165px 121px #fadece, 176px 121px #f5cbb6, 187px 121px transparent, 11px 132px transparent, 22px 132px #fadece, 33px 132px #f5cbb6, 44px 132px #fadece, 55px 132px #fadece, 66px 132px #fadece, 77px 132px #fadece, 88px 132px #fadece, 99px 132px #f5cbb6, 110px 132px #fadece, 121px 132px #fadece, 132px 132px #fadece, 143px 132px #fadece, 154px 132px #fadece, 165px 132px #fadece, 176px 132px #f5cbb6, 187px 132px transparent, 11px 143px transparent, 22px 143px #fadece, 33px 143px #f5cbb6, 44px 143px #fadece, 55px 143px #fadece, 66px 143px #fadece, 77px 143px #fadece, 88px 143px #fadece, 99px 143px #f5cbb6, 110px 143px #fadece, 121px 143px #fadece, 132px 143px #fadece, 143px 143px #fadece, 154px 143px #fadece, 165px 143px #fadece, 176px 143px #f5cbb6, 187px 143px transparent, 11px 154px transparent, 22px 154px transparent, 33px 154px #f5cbb6, 44px 154px #fadece, 55px 154px #fadece, 66px 154px #fadece, 77px 154px #fadece, 88px 154px #f5cbb6, 99px 154px #f5cbb6, 110px 154px #f5cbb6, 121px 154px #fadece, 132px 154px #fadece, 143px 154px #fadece, 154px 154px #fadece, 165px 154px #fadece, 176px 154px transparent, 187px 154px transparent, 11px 165px transparent, 22px 165px transparent, 33px 165px #f5cbb6, 44px 165px #fadece, 55px 165px #fadece, 66px 165px #fadece, 77px 165px #3a3a3a, 88px 165px #3a3a3a, 99px 165px #3a3a3a, 110px 165px #3a3a3a, 121px 165px #3a3a3a, 132px 165px #fadece, 143px 165px #fadece, 154px 165px #fadece, 165px 165px #fadece, 176px 165px transparent, 187px 165px transparent, 11px 176px transparent, 22px 176px transparent, 33px 176px #f5cbb6, 44px 176px #fadece, 55px 176px #fadece, 66px 176px #3a3a3a, 77px 176px #3a3a3a, 88px 176px #3a3a3a, 99px 176px #3a3a3a, 110px 176px #3a3a3a, 121px 176px #3a3a3a, 132px 176px #3a3a3a, 143px 176px #fadece, 154px 176px #fadece, 165px 176px #fadece, 176px 176px transparent, 187px 176px transparent, 11px 187px transparent, 22px 187px transparent, 33px 187px #f5cbb6, 44px 187px #fadece, 55px 187px #fadece, 66px 187px #3a3a3a, 77px 187px transparent, 88px 187px transparent, 99px 187px transparent, 110px 187px transparent, 121px 187px transparent, 132px 187px #3a3a3a, 143px 187px #fadece, 154px 187px #fadece, 165px 187px #fadece, 176px 187px transparent, 187px 187px transparent, 11px 198px transparent, 22px 198px transparent, 33px 198px transparent, 44px 198px #e5ddd9, 55px 198px #e5ddd9, 66px 198px #3a3a3a, 77px 198px #e5ddd9, 88px 198px transparent, 99px 198px transparent, 110px 198px transparent, 121px 198px #e5ddd9, 132px 198px #3a3a3a, 143px 198px #e5ddd9, 154px 198px #e5ddd9, 165px 198px transparent, 176px 198px transparent, 187px 198px transparent, 11px 209px transparent, 22px 209px transparent, 33px 209px transparent, 44px 209px transparent, 55px 209px #e5ddd9, 66px 209px #3a3a3a, 77px 209px #e5ddd9, 88px 209px #3a3a3a, 99px 209px #3a3a3a, 110px 209px #3a3a3a, 121px 209px #e5ddd9, 132px 209px #3a3a3a, 143px 209px #e5ddd9, 154px 209px transparent, 165px 209px transparent, 176px 209px transparent, 187px 209px transparent, 11px 220px transparent, 22px 220px transparent, 33px 220px transparent, 44px 220px transparent, 55px 220px transparent, 66px 220px #3a3a3a, 77px 220px #3a3a3a, 88px 220px #3a3a3a, 99px 220px #3a3a3a, 110px 220px #3a3a3a, 121px 220px #3a3a3a, 132px 220px #3a3a3a, 143px 220px transparent, 154px 220px transparent, 165px 220px transparent, 176px 220px transparent, 187px 220px transparent, 11px 231px transparent, 22px 231px transparent, 33px 231px transparent, 44px 231px transparent, 55px 231px transparent, 66px 231px transparent, 77px 231px #f5cbb6, 88px 231px #fadece, 99px 231px #fadece, 110px 231px #fadece, 121px 231px #fadece, 132px 231px transparent, 143px 231px transparent, 154px 231px transparent, 165px 231px transparent, 176px 231px transparent, 187px 231px transparent, 11px 242px transparent, 22px 242px transparent, 33px 242px transparent, 44px 242px transparent, 55px 242px transparent, 66px 242px #19689d, 77px 242px #f5cbb6, 88px 242px #fadece, 99px 242px #fadece, 110px 242px #fadece, 121px 242px #fadece, 132px 242px #0f75bc, 143px 242px transparent, 154px 242px transparent, 165px 242px transparent, 176px 242px transparent, 187px 242px transparent, 11px 253px transparent, 22px 253px transparent, 33px 253px transparent, 44px 253px transparent, 55px 253px transparent, 66px 253px #19689d, 77px 253px #f5cbb6, 88px 253px #fadece, 99px 253px #fadece, 110px 253px #fadece, 121px 253px #fadece, 132px 253px #0f75bc, 143px 253px transparent, 154px 253px transparent, 165px 253px transparent, 176px 253px transparent, 187px 253px transparent, 11px 264px #19689d, 22px 264px #19689d, 33px 264px #19689d, 44px 264px #19689d, 55px 264px #19689d, 66px 264px #19689d, 77px 264px #19689d, 88px 264px #fadece, 99px 264px #fadece, 110px 264px #fadece, 121px 264px #0f75bc, 132px 264px #0f75bc, 143px 264px #0f75bc, 154px 264px #0f75bc, 165px 264px #0f75bc, 176px 264px #0f75bc, 187px 264px #0f75bc, 11px 275px #19689d, 22px 275px #0f75bc, 33px 275px #0f75bc, 44px 275px #0f75bc, 55px 275px #0f75bc, 66px 275px #0f75bc, 77px 275px #0f75bc, 88px 275px #0f75bc, 99px 275px #19689d, 110px 275px #0f75bc, 121px 275px #0f75bc, 132px 275px #0f75bc, 143px 275px #0f75bc, 154px 275px #0f75bc, 165px 275px #0f75bc, 176px 275px #0f75bc, 187px 275px #0f75bc, 11px 286px #19689d, 22px 286px #0f75bc, 33px 286px #0f75bc, 44px 286px #0f75bc, 55px 286px #0f75bc, 66px 286px #0f75bc, 77px 286px #0f75bc, 88px 286px #0f75bc, 99px 286px #0f75bc, 110px 286px #0f75bc, 121px 286px #0f75bc, 132px 286px #0f75bc, 143px 286px #0f75bc, 154px 286px #0f75bc, 165px 286px #0f75bc, 176px 286px #0f75bc, 187px 286px #0f75bc, 11px 297px #19689d, 22px 297px #0f75bc, 33px 297px #0f75bc, 44px 297px #0f75bc, 55px 297px #0f75bc, 66px 297px #0f75bc, 77px 297px #0f75bc, 88px 297px #0f75bc, 99px 297px #19689d, 110px 297px #0f75bc, 121px 297px #0f75bc, 132px 297px #0f75bc, 143px 297px #0f75bc, 154px 297px #0f75bc, 165px 297px #0f75bc, 176px 297px #0f75bc, 187px 297px #0f75bc;
}

Thanks in advance!



Solution :

I suggest you change the units from 'px' to 'em', then use a media query to change the font-size, +/- around 1px. This works because 1em is the same size as the font-size.

I have forked your jsFiddle here that demonstrates this.

The media queries are like this, but you could change them:

/* Smartphones  ----------- */
 @media (min-width : 320px) and (max-width : 480px) {
    .b {
        font-size: 0.5px;
    }
}
/* iPads  ----------- */
 @media (min-width : 480px) and (max-width : 1024px) {
    .b {
        font-size: 0.7px;
    }
}
/* Desktops and laptops ----------- */
 @media (min-width : 1024px) {
    .b {
        font-size: 1px;
    }
}
/* Large screens ----------- */
 @media (min-width : 1824px) {
    .b {
        font-size: 1.5px;
    }
}

    CSS Howto..

    How to add 'important' to zIndex

    How to prevent outside CSS from adding and overriding ReactJS component styles

    How to have constants in Flex CSS files

    How to remove dropdown active color in bootstrap 3.0?

    Best Practice (jQuery, CSS): How to initialize hidden elements that will toggle visible?

    How do I keep a grid-type-arrangement of floating div elements centered in their container at various screen widths? [closed]

    how to fix a division using css and js..?

    How to create a css file in eclipse with e(fx)clipse plug in

    How to change the color of item selection radcombobox with a css style?

    How to change class of all children with jquery?

    How would I replicate this input text effect where they're almost a merged box in CSS/HTML?

    How can i include only custom css and js files in rails application

    How to solve divs overlapping issue and maintain css fluid layout?

    webkit animation play state: how to start/stop animation on demand with javascript

    how to change properties of a parent div on hover of child div

    Do you know about this weird thing. “AS3, Button width cannot change by setStyle(). However, inline CSS can change width.”

    How to force CSS to be displayed on empty element following whitespace

    How would you vertically justify text with css/Javascript?

    How to? CSS “Position:Absolute” constant Margin-Top? Possible?

    How can I use javascript or jQuery to make this table fill available width and height?

    How to uniformly darken colors?

    javascript - how to get date locale to work?

    CSS question: How to fix several rendering issues on http://www.fareham.ac.uk

    How can I line up my CSS DIVs

    How to change active link color in navigation bar

    How to locate and use fonts in Qt for Embedded Linux?

    How to modify twitter bootstrap “.icon-bar” colors

    SharePoint 2007 popup rich text editor displays corporate logo from master page - how can I remove this?

    How to stretch image in img tag larger than its natural size?

    How can I divide the screen to these divs in css?