Resizing images in CSS for responsive devices

[jar91]

Hello,
I am trying to make my website compatible for various devices. The problem is that I have images that are too big for certain screen sizes. I can’t seem to figure out how to resize the images automatically for when it is on a smaller screen. I am having the same issue with text as well. I also can’t seem to get a border to work around images. Any help would be incredibly appreciated.

Jar91

http://codepen.io/anon/pen/VLEaLO

[Gary Pickles]

Hi Har91,

If you use the class on the image to set the size and remove the sizing in your html.

<img src="images/alcatraz.png" alt="Alcatraz" />

then add this style to .medium
width: 100%;
max-width: 600px;
height: auto;

[Author]

Posts