Banner Slider tagline indented in MS-Edge browser

Home Forums Auberge Banner Slider tagline indented in MS-Edge browser

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #18946

    katw
    Participant

    Banner Slider tagline indented in MS-Edge browser

    Resolved

    This is an issue observed in MS-Edge browser.

    When the banner image slider headline wraps the message text over to the next line the first line of text is oddly indented.

    The issue relates to the Margin setting in main.css. In particular the definition:

    mark, ins, .highlight {
    ...
    margin: 0 0.38em;
    ...
    }

    In ms-edge it only applies the margin-left/right 0.38em to the first line of the headline text. The other lines of text within the same span.highlight are left un-indented.

    On Chrome etc the entire span (regardless of how many lines it wraps) is indented the 0.38em.

    So the appearance is an oddly indented first line… when the second and third line should also have been indented.

    Any ideas?

    See pictures.

    • This topic was modified 4 months, 2 weeks ago by  katw. Reason: Fixed attachment size
    • This topic was modified 4 months, 2 weeks ago by  katw. Reason: Fixed attachment and typo
    #18952

    Oliver Juhas
    Keymaster

    Hi katw,

    Thank you for spotting and reporting this!

    The issue actually isn’t really related to margins, but IE and Edge browser’s incompatibility with box-decoration-break CSS property.

    You can fix this using this custom CSS (I will apply this fix in next theme update too):

    mark, ins, .highlight {
      margin: 0;
    }
    
    @supports ((-webkit-box-decoration-break: clone) or (box-decoration-break: clone)) {
      mark, ins, .highlight {
        margin: 0 0.38em;
      }
    }

    Best regards,

    Oliver Juhas
    WebMan Design

    #18953

    katw
    Participant

    Thanks for the fast fix and reply. Fixes it nicely.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.