Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to make a floated image act responsively?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #41666
    ajnoguerra
    Participant



    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?

    #119594
    David_Leitch
    Participant

    Hey, I’ve worked up a quick [CodePen](http://codepen.io/David_Leitch/pen/vFgJfhttp://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 :)

    #119595
    Andy Howells
    Participant

    Edit : ^^ what he said. ^^

    #119600
    ajnoguerra
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.