›
Please disregard the 'View article...' shown at the bottom of many posts as this is the result of restoring old forum posts from a backup.

Responsive images and Bootstrap3

BJKlineBJKline
in Designing for Exponent
IIf I add class="img-responsive" to the image tag, I get this:
image


The ebay store logo is the image in question.

If I don't add the class I get this, which is how I want it to look, but want the image to responsive for phone and tablets.
image



View article...
Share on Twitter Share on Google+ Share on Facebook

Comments

  • dlefflerdleffler
    The bs3 'img-responsive includes a 'display:block' styling, so you'd have to add/create a new class for that entry to set the style to 'display:inline'. I'm not sure you want it to be a responsive image though?


    This (img-responsive) applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element. from http://getbootstrap.com/css/#images


    View article...
    Share on Twitter Share on Google+ Share on Facebook
  • BJKlineBJKline
    Dave, I think your right about wanting it to be responsive. I've decided to leave it alone for now.

    However, in my quest to have my site make better use of the bootstrap3 framework, I found a new stumbling block; Google maps. I've been playing with various tutorials regarding BS3 and Google maps. I can get it to look OK on desktop but when I look at the site on my iPhone 5S, the map is useless. The site url is http://arcsolinc.com/contact-us


    View article...
    Share on Twitter Share on Google+ Share on Facebook
  • dlefflerdleffler
    First off, I'd not make it 2 columns with the style 'col-xs-6' which keeps it 2 columns on even small (smartphone) devices. I'd suggest making them col-sm-6' which would be 2 columns on all but the smallest devices (smartphones), then it'd stack on the smartphone.

    If you want the map to stack to the top, yet be on the right, you could use a combination of the col-sm-push-6/col-sm-push-6 like we do in the main template for the bootstrap3theme...that way on small devices and larger it makes it look one way, but on the extra-small devices (smartphones), it stacks in sequence.


    View article...
    Share on Twitter Share on Google+ Share on Facebook
  • BJKlineBJKline
    After some more googling I found a tutorial that explained more about push vs pull in Bootstrap. It also show me that the order of the HTML mattered so by using their example I came up with this:


    <?php expTheme::module(array("controller"=>"container","action"=>"showall","view"=>"showall","source"=>"@left", "scope"=>"sectional")); ?>


    <?php expTheme::main(); ?>



    Which gets me the intended result (map on top on smartphone, in the right column on desktop). It just required another sub-theme.


    View article...
    Share on Twitter Share on Google+ Share on Facebook
Sign In or Register to comment.