Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 6, 2022 at 8:32 am #1363995
    solf

    Hi,

    The display of the symbol boxes is sometimes chaotic on mobile devices (SM portrait). Depending on which browser you call up, there are various unwanted displays. Apparently no browser creates a correct display:

    – Cut off words
    – Icon not centered
    – List items undesirably left-aligned
    – Headline too big distance (wrong line-height)

    Can I force the following points to be displayed correctly via css?
    1. list items centered on the left, with text aligned to the right
    2. Automatic hyphenation for long words in the list

    ===

    Die Darstellung der Symbol Boxen ist auf mobilen Geräten (SM portrait) teilweise chaotisch. Je nachdem, welchen Browser man aufruft, ergeben sich verschiedene unerwünschte Darstellungen. Eine korrekte Darstellung schafft offensichtlich kein Browser:

    – Abgeschnittene Wörter
    – Icon nicht zentriert
    – Listenpunkte unerwünscht linksbündig
    – Überschrift zu großer Abstand (line-height)

    Kann ich die korrekte Darstellung der nachfolgenden Punkte über css erzwingen?
    1. links zentrierte Listenpunkte, bei rechtsbündig eingestelltem Text
    2. Automatische Silbentrennung bei zu langen Wörtern in der Aufzählung

    greetinx, solf

    September 6, 2022 at 8:43 am #1363998
    Ismael

    Hey solf,

    Thank you for the inquiry.

    Would you mind providing a screenshot of the issue? You can use imgur, savvyify or dropbox for the screenshot. Thanks.

    To align the list items to the right and implement a work-break rule, please add this css code.

    .entry-content-wrapper div li {
    text-indent: 0;
    text-align: left;
    word-break: break-all;
}

    Please toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

    Best regards,
    Ismael

    September 6, 2022 at 9:39 am #1364006
    solf

    Hi Ismael,

    The following entry brought some improvement. 3 screenshots are in private content. Since it is a customer project, I could not make the pictures public.
    thanks. Solf

    ===
    Der nachfolgende Eintrag brachte etwas Besserung. 3 Screenshots befinden sich im privat Content. Da es sich um ein Kundenprojekt handelt, konnte ich die Bilder nicht öffentlich machen.
    danke. Solf

    .entry-content-wrapper div li {
  text-indent: 0;
 hyphens: auto; 
margin-bottom:6px;
}
    September 6, 2022 at 11:54 am #1364033
    Rikard

    Hi,

    Thanks for the update. Please try this CSS as well:

    @media only screen and (max-width: 479px) {
.iconbox_content li {
    word-break: break-all;
    text-align: initial;
}
}

    I can’t see the problem with the icon on my end though, which you point out in your screenshots. In which browser are you seeing that?

    Best regards,
    Rikard

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.