/*SCREEN SIZE FROM 200PX TO 400PX*/
@media (min-width: 200px) and (max-width: 500px) {
#yourph { margin-top: 50%; margin-left: 5px; margin-bottom: 100px;}
}
ale Ty tutaj nigdzie nie odnosisz się do wymiarów obrazka, a jedynie do jego marginesów, swoją drogą poczytaj o łączeniu zapisu:
margin: top right bottom left
Druga kwestia to taka, że przypisujesz wartość wymiarów obrazka jako atrybuty html, a na nie nie wpływają @media. Zamiast pisać:
<img src="img/face.jpg" width="300" height="250">
daj po prostu jakąś np. klasę dla tego obrazka:
<img src="img/face.jpg" class="image">
i potem w CSS:
.image {
width: 300px;
height: 250px;
}
@media (min-width: 200px) and (max-width: 500px) {
.image {
width: 100px;
height: 50px;
}
}
i jeszcze jedno... w komentarzu piszesz: "SCREEN SIZE FROM 200PX TO 400PX" a analizuje od 200 do 500... pamiętaj, że często zły komentarz jest dużo gorszy niż jego brak :) Jak powinno być, 400 czy 500? Za miesiąc nie będziesz pamiętał i sam zwątpisz :)