Problem z ustawieniem % w css (na mniejszych rozdzielczościach nie wygląda to tak jak powinno)

Question

Witam!
Mam problem gdyż ustawiłem sobie pozycje napisów, obrazków za pomoca "left:50%" itd.
Gdy zmniejszyłem ramkę to nie wyglądało już to za ciekawie. 
Czy ktoś wie jak to naprawić?
 

.zdjecie {
    border-radius: 50%;
	height: 300px;
	width: 300px;
	position: absolute;
	top: 50%;
	left: 30%;
	right: -50%;
	transform: translate(-50%, -50%);
}

.zdjecie2 {
    border-radius: 50%;
	height: 300px;
	width: 300px;
	position: absolute;
	top: 50%;
	left: 50%;
	right: -50%;
	transform: translate(-50%, -50%);
}

.zdjecie3 {
    border-radius: 50%;
	height: 300px;
	width: 300px;
	position: absolute;
	top: 50%;
	left: 70%;
	right: -50%;
	transform: translate(-50%, -50%);
}

h1 {
	color: green;
	font-size: 66px;
	text-align: center;
	margin-top: 10%;
	text-decoration: underline;
	text-transform: capitalize;
	text-shadow: 4px 4px black;
}

.pierogi {
	color: #e6b800;
	position: absolute;
	left: 30%;
	top: 70%;
	transform: translate(-50%, -50%);
	font-size: 40px;
	text-decoration: none;
}

.kopytka {
	color: #e6b800;
	position: absolute;
	left: 50%;
	top: 70%;
	transform: translate(-50%, -50%);
	font-size: 40px;
	text-decoration: none;
}

.pomidorowa {
	color: #e6b800;
	position: absolute;
	left: 70%;
	top: 70%;
	transform: translate(-50%, -50%);
	font-size: 40px;
	text-decoration: none;
}

 

Answer 1

 wyglądało już to za ciekawie

Mało konkretny opis problemu. Wstaw proszę jakiś screen albo opisz dokładnie co jest nie tak. Podejrzewam, że elementy nachodzą na siebie co jest spowodowane pozycjonowaniem absolutnym.

Answer 2

Polecam korzystać z @media jeżeli jest problem z responsywnością na małych rozdzielczościach

Fajny tutorial na w3