Skocz do zawartości


Zdjęcie
- - - - -

responsywny tekst i obrazki w prestashop


  • Proszę się zalogować aby odpowiedzieć
1 odpowiedzi na ten temat

#1 apactools

apactools

    Member

  • Members
  • PipPip
  • 15 postów

Napisany 08 February 2018 - 12:49 PM

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


#2 vekia

vekia

    Advanced Member

  • Members
  • PipPipPip
  • 114 postów

Napisany 08 February 2018 - 12:51 PM

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

GridSystemTable1.png

 

 

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






0 użytkowników czyta ten temat

0 użytkowników, 0 gości, 0 anonimowych użytkowników