Home › Forums › WoodMart support forum › “Section Divider” not showing well on Firefox mobile browser only

“Section Divider” not showing well on Firefox mobile browser only

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • September 17, 2023 at 7:16 pm #496776

    Jeriss Cloud Center
    Participant

    Dear,

    Please check the link below on a REAL mobile device with “Firefox” or “Firefox Focus” browser.

    You’ll notice that the curvy section divider on the landing image isn’t showing well.

    Tough, it shows well on all Chromium browsers (Chrome, Edge, Samsung, …), there no problem.

    Issue appears only for Firefox and only on Mobile, why?

    Thanks

    September 18, 2023 at 11:49 am #496924

    Luke Nielsen
    Keymaster

    Hello,

    May I request you send me some screenshots of the issue for a better understanding?

    Looking forward to hearing back from you!

    Kind Regards

    September 24, 2023 at 9:00 pm #498830

    Jeriss Cloud Center
    Participant

    Here are screenshots attached.

    Here is also an access to a staging in private (with no customizations and no plugins) where the issue appears.

    Attachments:
    You must be logged in to view attached files.
    September 25, 2023 at 11:53 am #498978

    Bogdan Donovan
    Keymaster

    Firefox browser has differences in the calculation of negative margins during content overlapping that cannot be simply fixed in the theme or builder plugin. To ensure that your content looks similar in all browsers, you need to minimize use of negative margins as much as possible:

    1. Remove margin-top: -25px from divider column (screenshot https://prnt.sc/yOR1yndZFGJq).
    2. WPBakery columns by default has padding-top: 35px styles that come from plugin (https://prnt.sc/w-buTiEiiTo7). To reset this padding, so it did not interfere with yours divider, reset padding-top of your divider column (screenshot https://prnt.sc/S_EWDokI2qbH).
    3. Remove all negative margin-top values from all devices in your infobox element (https://prnt.sc/wCzHtgZZ8hxw), so it does not overlap above content, including divider.

    If you’re done this changes, your divider will look normal in Firefox (screenshot https://prnt.sc/6gzeF3Hnybqo divider is temporarily marked in red to see its boundaries).

    October 4, 2023 at 2:10 pm #501544

    Jeriss Cloud Center
    Participant

    Perfect, your instructions were very clear and now it’s solved, thanks!

    October 4, 2023 at 2:24 pm #501548

    Jeriss Cloud Center
    Participant

    You can close this ticket, thanks

    October 4, 2023 at 2:45 pm #501570

    Luke Nielsen
    Keymaster

    Hello,

    You are welcome! In case you need any additional help, I’d be more than happy to assist you.

    Have a good day!

    Kind Regards

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘“Section Divider” not showing well on Firefox mobile browser only’ is closed to new replies.