Cakers Cakers - 21 days ago 8
CSS Question

Image Mobile Responsive Design

Currently, I am trying to learn responsive design for mobile. The issue I am running into is that my images scale just fine when increasing browser size. However, they tend to go outside of the box which contains the text. I'll provide a picture so that you can see what the issue is.

If anyone has any ideas as to how to properly keep images inside divs when scaling that would really help! Thanks!

enter image description here

Also here is my Jsfiddle: https://jsfiddle.net/x1mn04p2/ (I put the img css on top and the rest of the site's css below that so that I could get the full look)

HTML:

<section>

<div id="box">
<h1> GCOM 366</h1>
<section class="clearfix" id="primary">
<div class="imgbox">
<img class="adjustable" src="weblogo" alt="example web page" width="300" heigh="300" style="float:right">
</div>
<h2> Benefits</h2>

<p class="side">
1. Learn industry standard programs
<br>
2. Build Portfolio
<br>
3. Increase collaboration skills
<br>
4. Become more creative
<br>
5. Understand good layout
<br>
6. Feel confident in HTML/CSS
</p>
</section>




img.adjustable{
width: 100%;
max-width: 400px;
max-height: 400px;
margin: 1em 1em 1em 2%;
}

Answer

The image's right margin complicates everything. Remove it. Instead of it add a right padding to .imgbox for example.