Maintaining alignment with resolution

im trying to maintain the alignment of column containing image and text with screen resolution.
1) standard laptop screen(1366px) this the alignment what i prefer in every screen resolution.


2) 2k display (2560px) i want content to be balanced with image as we can see gap below content

3) tablet landscape(1024px) text overflow

i have tried few solution. (Dont pefer background-image)
1.Defining height to image according screen resolution.
2.Adusting font-size and line-hegiht with screen resolution.
3.Hiding overflow text

how can we balance the alignment of text and image with screen resolution as in standard laptop screen(1366px)

This is an old demo slightly adapted but should do what you want.

It uses the @supports rule for older browsers but that could be removed now.

You could do the same thing using grid also but there’s no difference really.

1 Like