Streaming live at 10am (PST)

Website elements work different across screens with different resolutions

Hey everyone,

I just found out that my some elements on my website don´t work/look the way they should, in screens with different resolutions (namely higher resolutions than my laptop which is 1366x768).

The element I´m having trouble with is the one on the print below. It consists of :

  • section
    — column
    ----- link block inside each column (with the images as backgrounds)

Do you have any idea why this happens?

here is the public link

The layout is responding to the change of the monitor size… Just curious if you took this into account when designing this section because it doesn’t display correctly in any other device either.

When you shrink the window size horizontally the text is moving in relation to the parent container which shrinks in size. You might try giving each rectangle a fixed pixel width so it doesn’t cause the text to move.

There are also differences in desktop monitor sizes when designing responsive sites. I work mostly on a 27" imac with a resolution of 2560x1440, where a layout will look completely different than on a 13" macbook pro with a different resolution.