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 insert several images into HTML/CSS quickly? [closed]

    CSS: how to style a div so that it has no effect

    Magento - how to locate the location of inline css

    using overflow hidden, show a partial element when the children are too large for container

    How to hide the information, just only show when button is clicked html, css. javascript?

    CSS: How to set 100% width on the first li of ul

    How to disable Javascript/CSS minification in ASP.NET MVC 4 Beta

    How to show list items in menu when hover on the parent's it via CSS? [closed]

    How to apply css to particular selected child in ivh-treeview?

    How to correctly switch images with javascript?

    How to create javascript or css fadeInDown on mouseover?

    How do I make my css class footer go from the left to right side of the screen?

    How to make a centered, responsive CSS circle within a Boostrap div?

    How to add visual indicator of focus for Radio Button for Firefox

    How to load .css file from parent directory with .htaccess rule?

    How to access CSS children properly?

    How to override the external CSS using some condition in Jquery?

    how to convert inline CSS into external CSS?

    How to overlap a div to an another div without changing their positions - Css

    How to turn on Visual Studio 2010 .css Intellisense on .less file

    how do i include css based on screen size of the device

    How i can create dynaminc ordered list items with pure css

    How to put bull inside css circle

    How to change the dimensions of a div depending of a number extern to that div? jquery/css

    How to center a Dijit Select widget?

    How to get a smooth sine wave alternation with Javascript/JQuery CSS

    How do I get form-groups to overlap?

    How to give same style to first 2 paragraphs differently in css

    I am wondering how js fiddle is handling their textareas concerning resizing and their layot

    How do you make these div elements display correctly?