1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Design gets unreadable on smaller screens

Discussion in 'HTML & Website Design' started by lilpeanut, Jul 23, 2013.

0
  1. #1
    Okay.. I have developed MANY responsive designs and never had this problem, but this is my first time creating a magento theme.. which I still think has nothing to do with it.

    But our main php programmer has only made this website viewable if you alter your hosts file so I can't really post any URL that would give you a clearer idea.

    Anyway, when I am using the Resizer bookmarklet in Chrome, the smaller screens make the design become unreadable when my other responsive designs just.. well were responsive. The text is like squiggly lines because I can barely see it when testing on the phone and on some smaller tablet devices.

    I can't find the main reason for this. I'm using em for font-sizes, percentages for div widths and everything. I have another design that does this (but that's because it wasn't a responsive design to start off with)..

    Has anyone had this problem? I can't nail down the one thing that is making this happen.

    This is the one we are going to do production on with the themes and the default Magento theme does it as well:

    http://www.main-street-market.com/

    But the thing is is that the theme I'm using, I deleted all the stylesheets (the styles.css) that magento comes with as a default and changed a lot of the markup to use the container and row and span classes that Twitter Bootstrap comes with.
    So I guess from that design, why is it the text becomes unreadable when on smaller screens?

    Ok I figured out it's because this this that gets appended into the style attribute on the <html> tag:

    -webkit-transform: scale(0.6122448979591837); -webkit-transform-origin: 0px 0px; min-width: 980px;

    How exactly do I find what's appending that to the html style attribute? I'm guessing that's just a thing magento does by default in one of the javascript files?

    These are all the default js files that Magento includes:
    <script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/prototype/prototype.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/lib/ccard.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/prototype/validation.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/varien/js.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/varien/form.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/varien/menu.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/mage/translate.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/mage/cookies.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/mainstmarket/jquery.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/mainstmarket/bootstrap.min.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/mainstmarket/main.js"></script>
    Code (markup):
     
    Last edited by a moderator: Jul 23, 2013
    lilpeanut, Jul 23, 2013 IP