Dealing with different resolutions?

+2 Charlie Coplestone · January 6, 2015
Hello there,

I’m fairly new to website design and I was wondering if anyone here would be so kind as to explain how or link me with some information on how to work with different resolutions in CSS. I’m having trouble positioning images and how they appear in resolutions that are not 1920 x 1080.

If I change resolution on my computer to see how the page is displayed in different resolutions the images on the website appear displaced like so:

My View (1920×1080):

Different Resolution (1600×900):

I've read that maybe liquid/fluid layouts maybe be a potential fix? I've also read about possibly putting images in a container, but I’m not quite sure how. I don’t suppose you could link me to some decent articles on how I could achieve this?

Thanks for your help.

Post a Reply


Oldest  Newest  Rating
+1 Kaveh Greenwood · January 8, 2015
Use CSS media queries to modify the element's style depending on the screen resolution.

@media screen and (max-width:1024px) {
img {

@media screen and (max-width:800px) {
0 Charlie Coplestone · January 6, 2015
I see, thanks a lot. I suppose this applies to when I zoom in and out the images on the website also displace in the same manner?
0 Chris Sisco · January 6, 2015
What you are looking to do is called responsive web design. A google search should bring up tons of resources to help you out.

Let me google it for you:
  • 1

HTML / CSS / Web Design


Discuss, share, ask, learn and teach HTML5 and CSS3.