Arrows issue on iPhone

When I enter my site on iPhone http://fire.++++++.net/work-based-training/
those arrows have some space on left/right side.
I cannot confirm this on android devices.
https://static.livechatinc.com/8801096/P9QLH5Y2UQ/3ebe9e144278a2795f3b9aea00386ee1/IMG_2B7A12758351-1.jpeg

Can you help me track this issue. I use separators option for each row in Page Builder by SiteOrigin.

  • Predrag Dubajic

    Hi allanlove,

    Hope you're doing well :slight_smile:

    I did some checks and it seems that issue is with tg-container class not taking the full width of the screen, it actually snaps at 98%
    When I increase this value on iPhone to 100% then the empty space is gone, however, some other things on page gets moved a bit, like a slider header for example, and also text gets close to screen borders so doesn't look that nice anymore.

    I tried couple other CSS tweaks as well but could find anything that would do the trick without messing up something else :slight_frown:

    I did find a possible solution that would increase the width of the arrow holder so it goes over a screen a bit and thus removes that empty space, it's worth giving it a shot:

    @media only screen
      and (min-device-width: 375px)
      and (max-device-width: 667px)
      and (-webkit-min-device-pixel-ratio: 2)
      and (orientation: portrait) {
        .flash-row-separator .flash-bottom-svg-wrapper .svg-style-1 {
            width: 110%;
            left: -5%;
        }
    }

    However, it would be best to get in touch with your theme developers about this so they can check their CSS in more detail and see what would be the best approach here.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.