Strona z resposnywnymi grafikami

0

Witam serdecznie.

Piszę sobie stronę opartą na Bootstrapie.

Mam na niej 4 grafiki takie jak na obrazku:
http://i62.tinypic.com/29xzq0m.png

Wszystko niby fajnie ale chciałbym aby ta strona wyświetlana na telefonie powodowała aby te obrazki były obok siebie ( może zmniejszały się ) a nie ustawiały jeden pod drugim. Jak to zrobić?

Tak wyglądają DIVy


<div class="row mt ">
			<div class="col-lg-3 col-md-3 col-xs-12 desc">
				<img width="300" height="400" src="assets/img/krzywe/logo.png" alt="" />
				
				<a href="#" target=blank><p style="font-size: 25px; font-family: 'Allura';">Przycisk1</p></a>
			</div>
			
			<div class="col-lg-3 col-md-3 col-xs-12 desc">
				<img width="300" height="400" src="assets/img/krzywe/img1.png" alt="" />
				
				<a href="#" target=blank><p style="font-size: 25px; font-family: 'Allura';">Przycisk2</p></a>
			</div>
			
			<div class="col-lg-3 col-md-3 col-xs-12 desc">
				<img width="300" height="400" src="assets/img/krzywe/img2.png" alt="" />
				
				<a href="#" target=blank><p style="font-size: 25px; font-family: 'Allura';">Przycisk3</p></a>
			</div>
			
			<div class="col-lg-3 col-md-3 col-xs-12 desc">
				<img width="300" height="400" src="assets/img/krzywe/img3.png" alt="" />
				
				<a href="#" target=blank><p style="font-size: 25px; font-family: 'Allura';">Przycisk4</p></a>
			</div>
			
		</div>

2

col-xs-12 powoduje że w najmniejszej wesji (xs- eXtra Small) element zajmuje 12 kolumn pionowych (w 12-kolumnowym gridzie bootstrapa praktycznie oznacza to szerokość 100%). zmień na col-xs-3. Element zajmie 3 z 12 kolumn, czyli zmieszczą się obok siebie 4.
I daj obrazkom możliwość skalowania się, czyli wywal te staromodne width= i height=, i zamiast tego daj max-width:100% w CSS.

0

Ok niby fajnie.

Jeszcze chciałbym pozbyć się odstępów pomiędzy tymi obrazkami ale nie wiem jak ;/

A jak zrobić żeby również tekst się skalował na mniejszy na urządzeniach moblinych? :)

0

Podejrzyj sobie inspectorem/firebugiem skąd się ten odstęp bierze i zmień odpowiednią właściwość - pewnie będzie to margin obrazka lub padding kontenera :)
a skalowanie tekstu - znaczy się małe urzędzenie = mniejsza czcionka? możesz definiować style CSS zależne od wielkości ekranu klienta, doczytaj sobie tutaj http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ - ja szczegółów nie znam, marny ze mnie webdeveloper raczej.

0

Ok to będę dłubał dalej :)
Dzięki za pomoc :)

Głównie chodzi o to, że jak otwieram stronę na telefonie to z tych napisów robi mi się układanka ( wszystko się rozsypuje ) a chciałbym aby się zmniejszały albo coś :)

0

do pozbycia sei marginesow uzywaj diva "row". czyli wsadz te swoje col-xs-x do diva z klasa "row".

0

Kurcze nie mogę sobie poradzić, aby tekst pod tymi obrazkami zmniejszał się w zależności od rozdzielczości urządzenia.
Próbowałem użyć tych @media queries ale nie chce mi to zagrać ;/ Jak coś takiego zrobić?

to zwykłe znaczniki

Jakis tam tekst

</p>

1 użytkowników online, w tym zalogowanych: 0, gości: 1