Forums

  • # January 1, 2013 at 8:35 pm



    responsive images

    This is some text this is some text this is some text




    and the css —

    body { background: #dcdcdc; }
    img { max-width: 100%; height: auto; }

    .container { padding: 10px 12px; }
    #text{float:left; width:100px;margin-right:10px; }
    .frame {
    background: #fff;
    padding: 6px;
    box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
    -moz-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
    -webkit-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
    }

    My main concern in this fiddle is the div#text and img.frame. I’m trying to create a responsive website, but this has been my problem for so long, I can’t figure out how ‘to make the img behave beside the text and be responsive at the same time without going under the text when I try to reduce the size of the browser window. What it does is, it goes under the text before it acts responsively. Is there a workaround for this?

    # January 1, 2013 at 8:52 pm

    Hey, I’ve worked up a quick [CodePen](http://codepen.io/David_Leitch/pen/vFgJf “http://codepen.io/David_Leitch/pen/vFgJf”) to give you some help.

    In my example, I floated the image, rather than the text. Then, by giving the image a width of 60%, the image will respond to the width of the browser. I’ve also done a media query for when the container gets too small to fit the image and the text nicely side by side. Hope it helps :)

    # January 1, 2013 at 8:52 pm

    Edit : ^^ what he said. ^^

    # January 1, 2013 at 9:27 pm

    I’ve been cracking my head trying to figure this out for the past weeks. Thank you for that neat code @David_Leitch. Happy New Year everyone! :)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag