How do I make a responsive website with images?

So I am having ALOT of trouble with responsive web design with images…Here’s my CodePen link:

I’m having specific trouble with this: (which I have several different pages of, this one is my original. I got it perfect for a GalaxyS5, but any other phone looks weird), and this one: (this is my home page)

Do I need to have columns in div’s? Are the images in too much of a complicated design? Whenever I resize it to anything besides my computer width, it just doesn’t really come out the way I want it. Please resize the pages and let me know what you think!

I’m guessing that you feel that the img is getting too small for smaller screens? The behavior of this img is being controlled by the img-displayed class you placed on it. If you remove this you can add your own css. I might do something like:

  • Apply ‘text-align: center’ to the parent div of the img to center it.
  • Apply the size you want for larger screens to the img, maybe 300px or something. ‘width: 300px’.
  • Apply a max-width to the img to made it work better on small screens. maybe ‘max-width: 60%’