How do I make a responsive website with images?

1

So I am having ALOT of trouble with responsive web design with images…Here’s my CodePen link: https://codepen.io/hannahgram56/

I’m having specific trouble with this: https://codepen.io/hannahgram56/full/dNvwwg/ (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: https://codepen.io/hannahgram56/full/oBzVJM/ (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!

2

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%’