- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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?
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 :)
Edit : ^^ what he said. ^^
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! :)