Skalowanie pola output CSS - proszę o wskazówkę

pytanie zadane 2 listopada 2016 w HTML i CSS przez Guardd Początkujący (350 p.)

Cześć,
Zrobiłem taki małe ćwiczenie w js i chciałem je prosto ostylować. Trudności napotkałem w skalowaniu, gdzie, tak jak wszędzie działa mi jednostka "vw", tak w outpucie - nie.
Mógłby ktoś rzucić okiem i powiedzieć o co może chodzić?

PS. Ewentualnie inne wskazówki co do kodu / techniki również są mile widziane. Uczę się.

KOD:
http://codepen.io/Guardd/pen/VmZezQ

komentarz 2 listopada 2016 przez KariK-02 Mądrala (6,030 p.)

Eduweb.pl JavaScript dla początkujących, tak ?

3 odpowiedzi

odpowiedź 2 listopada 2016 przez Abel Mądrala (5,140 p.)

Nie wiem dlaczego ci nie działa . Skopiowałem twój kod i odpaliłem u siebie i vw działa tak jak powinno

Opisz dokładniej co chcesz zrobić

komentarz 2 listopada 2016 przez Guardd Początkujący (350 p.)

Po wylosowaniu liczb przy zmniejszaniu wielkości okna, wylosowane liczby (kule a nie cyfry) nie pzybliżają się do siebie w taki sposób aby symulowało to jednolite zmniejszanie całego widoku.

Odpalając w Chromie, zmniejsza się do pewnego momentu i następuje blokada okna. Nie można go bardziej zmniejszyć.

Kiedy odpalam w chromie ale przez preview Bracketsa, to okno się nie blokuje, ale kule wyjeżdżają z boxa prawą stroną.

komentarz 2 listopada 2016 przez Abel Mądrala (5,140 p.)

Zmniejszyłem przeglądarkę maksymalnie jak się dało , i oto efekt

http://images81.fotosik.pl/132/b69d8768ea0edae5med.png

Nie wiem dlaczego ale nie działa mi dodawanie obrazków

komentarz 2 listopada 2016 przez Guardd Początkujący (350 p.)

Właśnie - okno dochodzi do takiego momentu w którym nie można go już bardziej zmniejszyć. Dlaczego?

poniżej screen z preview Bracketsa. Kule "wyjeżdżają" prawą stroną. A ja dążę do tego, żeby skalowały się razem ze wszystkim.

komentarz 2 listopada 2016 przez Abel Mądrala (5,140 p.)

u mnie w przeglądarce jak widać na fotce nic nigdzie nie wyjeżdża

nie wiem jak ci pomóc , może zamiast

    margin-left: 10%;
    margin-right: 10%;

wstyaw


    margin:20 auto;

20 odpowiada za margines górny

odpowiedź 2 listopada 2016 przez WladcaWidel Nowicjusz (220 p.)

z taga <output> wyrzuć ze styli marginesy lewy i prawy

a w tagu <span> zmniejsz marginesy do 3px

czy taki efekt Cie zadowala?

komentarz 2 listopada 2016 przez Guardd Początkujący (350 p.)

Niestety, nic to nie dało. Nadal albo blokuje mi możliwość zmniejszenia okna przeglądarki, albo (przy preview) kulki wyjeżdżają.

odpowiedź 2 listopada 2016 przez WladcaWidel Nowicjusz (220 p.)

na obrazku widac ze wszystko działa

jak pisałem usun marginesy z lewej i prawej zupełnie bo one nic nie wnoszą przy pełnym ekranie natomiast przy zwężonym oknie wypychaja kulki oraz ustaw w spanie margines na margin: 0.5vw;

i juz :)

komentarz 3 listopada 2016 przez Guardd Początkujący (350 p.)

A potrafisz jeszcze bardziej zmniejszyć rozmiar okna? Chodzi mi o to, że okno "zatrzymuje się" na pewnej szerokości i nie da się go bardziej zmniejszyć.

Problem rozwiązałem flexboxem.

output {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
}

Dzięki wszystkim za starania!