• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
0 głosów
152 wizyt
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

0 głosów
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 sad

 

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

0 głosów
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ą.
0 głosów
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!
komentarz 3 listopada 2016 przez WladcaWidel Nowicjusz (220 p.)

a teraz nie przenosi Ci jednej kulki do nowej linii na zmniejszonym oknie przeglądarki?

komentarz 3 listopada 2016 przez WladcaWidel Nowicjusz (220 p.)
jest ok usunałem padding i git :) gratuluje rozwiązania :)

Podobne pytania

0 głosów
1 odpowiedź 124 wizyt
pytanie zadane 21 maja 2017 w Rozwój zawodowy, nauka, praca przez betman Bywalec (2,630 p.)
0 głosów
1 odpowiedź 132 wizyt
pytanie zadane 1 listopada 2023 w HTML i CSS przez olo123 Nowicjusz (120 p.)
0 głosów
4 odpowiedzi 220 wizyt
pytanie zadane 17 lipca 2020 w HTML i CSS przez TheCaysen Nowicjusz (120 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...