Problem z sformatowaniem opisu

[antylopa]

W podstawowym szablonie PrestaShop 1.7.4.4 podczas opisywania towaru w zakładce PODSUMOWANIE, czyli tej co wyświetla się po prawej stronie zdjęcia, mam problem z odstępami pomiędzy wyrazami. Chcę uzyskać efekt równej pionowej linii opisu w każdej z linijek . Zobrazuję na przykładzie o co mi chodzi:
Producent        xxx
Model               xxx
Wielkość          xxx
Kolor                xxx
Tak być powinno niestety xxx pomimo zapisywania w kodzie źródłowym nie "trzymają" zadanego odstępu i następuje przesunięcie tekstu. .

[krzysiek_web]

Opisujesz to w treści czy masz jakąś tabelkę? Trzeba sformatować zapewne daną sekcję w stylach css. 

[antylopa]

Przepraszam, że się nie odzywałem ale koniec roku i remanent z tym związany...

Tak wygląda mój przykładowy skrócony opis produktu:

<p class="opis">producent                     <span>KARINO</span></p>
<p class="opis">model                           <span> 2758/005-P rudy</span></p>
<p class="opis">cholewka                       <span>skóra, środek wykończony skórą </span></p>
<p class="opis">wkładka                         <span>skóra</span></p>
<p class="opis">wysokość obcasa       <span> 6 cm</span></p>
<p class="opis">wielkość                        <span> typowa</span></p>
<p></p>

[atomek]

np tak:

    .opis{
        display: flex;
        justify-content: space-between;
    }

 

[antylopa]

Dzięki za podpowiedź

Proszę Cię napisz mi dwie linijki tekstu posługując się podanym przeze mnie przykładzie opisu, bo moja wiedza w tym zakresie niestety kuleje...  

[atomek]

dodaj to do pliku custom.css

[antylopa]

Dodałem, niestety nic to nie zmieniło

W załączniku 1 przesyłam zrzut ekranu przedstawiający wprowadzony tekst oraz tak jak on wygląda w kodzie źródłowym. W drugim załączniku to co widać w sklepie.

[atomek]

spróbuj wyczyścić cache

[antylopa]

Cache wyczyszczony, niestety nic to nie dało. Poprawnie wpisany opis trzymający równą pionową linię po prawej stronie, w kodzie źródłowym się "rozjeżdża" i tak właśnie wyświetlany jest na sklepie.

Żeby nie było niejasności, podany kod wpisałem do pliku /themes/classic/assets/css/custom.css

Edited January 5, 2019 by antylopa (see edit history)

[atomek]

opis się nie rozjeżdża, etykiety są wyrównane do lewej, a sam opis do prawej,

jak ma być inaczej to spróbuj w ten sposób:

w opisie produktu umieść kod tak jak w przykładzie

<p class="opis"><span class="etykieta">producent marka</span><span>KARINO</span></p>

 

w plik custom.css dodaj

.opis{
    display: flex;
}

.opis .etykieta {
    width: 200px;
}

 

jak 200px za mało lub za dużo to zmień wartość na inną

[antylopa]

Niestety efekt byle jaki. Lewa strona pozostaje tak jak potrzeba, prawa zaś wyrównuje do prawej strony, co powoduje, że odstępy są zbyt duże. 

Obawiam się, że temat jest nie do przeskoczenia z uwagi, że poprzez sklep wystawiam aukcje na Allegro. Gdyby chodziło o sam sklep skorzystałbym z tabeli i byłoby po sprawie. Tutaj dochodzi to co może przejść na Allegro, stąd problem.

Niemniej jednak zauważyłem, że po wpisaniu tekstu i jego podglądu kodu źródłowego, dosyć szybko mogę ręcznie skorygować ostateczny wygląd widząc w kodzie źródłowym jak będzie wyświetlany w sklepie.  

[antylopa]

Po namyśle doszedłem do wniosku, że można by ustawić stałą ilość spacji w każdej linijce. Skoro odstęp pomiędzy słowem "producent" a kolejnym ma wynosić np. 16 spacji, to w drugiej linijce po słowie "model" powinno być 20 spacji (słowo krótsze o 4 litery od słowa "producent"). 

[atomek]

Dodawanie spacji to jest jakieś rozwiązanie, tylko trochę bez sensu. Odpowiedz sobie na pytanie ile spacji potrzeba na literkę np "w", a ile na literkę "i". Nie używasz w sklepie czcionki monotypicznej.

Masz dużo czasu i lubisz liczyć spacje to możesz w ten sposób to zrobić.

 

 

Możesz osiągnąć "równy" efekt po stronie sklepu np. w ten sposób:

1. usuń zbędne znaki odstępu z opisu.
    
    To jest fragment kodu z twojej strony:
    <p class="opis">inne &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wyjątkowo lekkie i wygodne</span></p>
    
    doprowadź go postaci:
    <p class="opis">inne<span>wyjątkowo lekkie i wygodne</span></p>
    
    lub jak w poprzednim przykładzie do postaci - da to większe możliwości formatowania:
    
    <p class="opis"><span class="etykieta">inne</span><span>wyjątkowo lekkie i wygodne</span></p>
    
2. dodaj do css kod formatujący np:

    z poprzedniego przykładu,

 

lub:

.opis{
    display: flex;
    justify-content: space-between;
}
    
.opis span {
    width: 300px;
}

W szablonach allegro była i chyba dalej jest możliwość korzystania z własnych styli css

 

[antylopa]

próbowałem różnych kombinacji, efekt przedstawiam chronologicznie

pierwsza kombinacja to schowek01, schowek02, schowek03

druga kombinacja to schowek04, schowek05, schowek06

za każdym razem jedną kolumnę mam formatowaną do lewej, drugą zaś do prawej strony, a nie o to mi chodzi

specjalnie zostawiłem trzy ostatnie linijki kodu źródłowego, których nie zmieniałem, po to, by pokazać, że o taki efekt końcowy mi chodzi 

 

 

 

 

 

[atomek]

Jest coś takiego jak cache, po każdej zmianie w css wyczyść, albo wyłącz optymalizacje.

Dopiero po tym zobaczysz zmiany

 

 

[antylopa]

coś z tego będzie

na chwilę obecną wygląda to tak jak na screenie

 dobrze byłoby, żeby zmniejszył się odstęp pomiędzy kolumnami, próbowałem zmieniać wartość width, ale nie osiągnąłem pożądanego efektu

[design4VIP]

Tak czytajac wszystkie rozwiazania... ok, fajne, ppwinno zadzialac itp. Wszystko niby fajnie, ale czy ktos pomyslal i sprawdzil jak to bedzie wygladalo w responsive? Czyli np. Na tel?

Ja bym raczej posilil sie tutaj kolumnami bootstrampa. Szybko, prosto i przede wszystkim responsywnie

[antylopa]

Sposób dobry, w responsive wygląda tak jak trzeba, problem w tym, że nie przechodzi to tak jak powinno przez mój program do synchronizacji z Allegro. Wystawiając ze sklepu na Allegro mam w każdej z linijek zlewający się ze sobą tekst.

Na chwilę obecną zadowolony jestem, że dosyć szybko mogę ręcznie poprawić opis korzystając z podglądu w kodzie źródłowym.

[stone62]

nie wiem co zrobić z "?"

 

[stone62]

występuje również w tekście opisu produktu

 

[design4VIP]

zmien czcionke albo znak "-" (myslnik)  bo brakuje znaku w zadanej czcionce

Edited February 1, 2019 by design4VIP (see edit history)

[stone62]

gdzie tego szukać?

 

 

[design4VIP]

13 hours ago, stone62 said:

gdzie tego szukać?

 

 

a gdzie masz te znaki zapytania?

[stone62]

np.: https://www.dread-shop.pl/pl/dredloki-szydelkowane/241-syntetyki-frosty-brown.html

 

[design4VIP]

14 hours ago, stone62 said:

np.: https://www.dread-shop.pl/pl/dredloki-szydelkowane/241-syntetyki-frosty-brown.html

 

pytasz czy sobie odpowiadasz? jak pisalem wczesniej zmien w tekstach, tam gdzie wystepuje znak zapytania na myslnik. zakladam, ze teksty byly kopiowane z jakis innych zrodel i to jest blad kodowania tekstow. jezlei po stronie panelu w tych tekstach nie wystepuja znaki zapytania tylko myslniki to musisz je albo przepisac, albo zmienic czcionke, bo w tej ten znak nie wystepuje