@PeresvetIvan
Posted
Hello, Nada. I join the above sayed by rfilenko, and I can also add that you set the relative height for all box elements in the grid container (grid-template-rows property), and all the heights are calculated relative to the largest block - in your case, this is an image. But the problem is that the image changes size, so the height of all the " box " elements will also change, which is why everything slides when you change width of the browser window. Set a fixed image width, for example in px, or delete the grid-template-rows property for the grid container, and manually set internal margins (padding and margin) for all elements. Also you have problem with icons, set to them fixed width and their size will not change. And wrap icons in links ('a' tags), and add property "cursor: pointer" to button and social icons. Good luck)