1 reply to this topic

[apactools]

Proszę spojrzeć na link
Czy jestem w stanie dzięki edytorowi osiągnąć taki efekt jak tutaj: https://www.x-kom.pl...tellimouse.html
Tj tekst obok zdjęcia?
Przy użyciu tabeli na telefonie nie widać połowy zawartości ponieważ chowa się za erakn.

 

Pozdrawiam

[vekia]

Tabelki standardowo nie są responsywne, generalnie to dość skomplikowana sprawa aby tabelę <table> zrobić responsywną i moim zdaniem lepiej wykorzystać inne metody - zwłaszcza te, które domyślnie są responsywne.

 

Budowa responsywnych treści wymaga zastosowania odpowiednich "class" dla tworzonych elementów.

class to parametr jaki dodajemy do elementu np:

<div class="col-md-6"></div>

W zależności od oczekiwań stosujemy odpowiednią wartość parametru. np. dwa elementy obok siebie, każdy z nich zajmuję połowę przestrzeni

<div class="col-md-6"> element 1</div>
<div class="col-md-6"> element 2</div>

np. dwa elementy obok siebie, jeden dłuższy, drugi krótszy

<div class="col-md-8"> element 1</div>
<div class="col-md-4"> element 2</div>

np. trzy elementy obok siebie, każdy z nich takiej samej długości

<div class="col-md-4"> element 1</div>
<div class="col-md-4"> element 2</div>
<div class="col-md-4"> element 3</div>

przydatna ściąga, która przedstawia ułożenie bloków w zależności od zastosowanych klas

 

 

w Pana przypadku (na podstawie screena który Pan przesłał) najlepiej będzie utworzyć dwa elementy:

- pierwszy element dłuższy - z treścią

- drugi element krótszy - z obrazkiem

 

do edytora wstawiamy kod:

<div class="col-md-8"> element 1</div>
<div class="col-md-4"> element 2</div>

następnie uzupełniamy go swoją treścią:

- element 1 zastępujemy tekstem który chcemy wyświetlić

- element 2 wstawiamy obrazek a za pomocą narzędzia do edycji parametrów ustawiamy class="img-responsive" (klasa która sprawia, że obrazek jest responsywny)

 

w efekcie uzyskamy responsywną treść która będzie dostosowywać się do szerokości okna urzadzenia na którym przeglądana jest strona

 

video, które przedstawia cały proces:

https://drive.google...gwMWxCEnMm49l_a