Section missing on small screen

[Finkkleton]

Hello there,

Sections that we are using as headers for our inner pages are disappearing on iPhone - we have checked this on Safari, Brave, and Chrome. It seems to be the background image - the text is still there but is white so currently invisible.

We have not set any responsive conditions, so do you know why this might be happening? We can see them fine using desktop browser inspectors.

We have checked the pages on Android / Samsung and these sections are visible so it only seems to be an iPhone issue.

https://btwhole.sale/your-benefits/

Kind Regards,

Spencer

[tristup]

Hi Spencer,

Thanks for reaching out.
I have checked the page in online browser testing tools but didn’t find the problem in iPhone as described here. If you are still having this issue, please mention the device version, browser name, and version, and also the operating system you are using, which will help us to replicate the issue at our end.
I would also request you provide any video that helps us to recognize the problem.

Thanks

[Finkkleton]

Hello there,

Thanks for doing your test, but we are not seeing the section on iPhones. The background image is missing - the title text is still there.

What version did you check it on?

We cannot see the section on iPhone 6, 7, and 11 - the browsers we tested were: Safari, Brave, Chrome. That specific section does not display on any of these.

Any suggestions as to what we should do? These sections were visible previously - the site was build a month ago and they disappeared a couple of days ago.

Thanks!

Spencer

[ruenel]

Hey Spencer,

I have inspected your page and I found out that you have added a custom element CSS in the first Section element.

You have inserted this:

$el {
  color: white;
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 3rem 2rem;
  width: 100%;
  z-index: 2;
  border: 1px solid red;
  
  &::before {
    content: '';
    display: block;
    background: #000;
    background-image: url("https://btwhole.sale/wp-content/uploads/2023/09/content-curve-top2700x350-6923.jpg");
    background-size: contain;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    border-radius: 300vw;
    width: 600vw;
    height: 600vw;
    z-index: -1;
  }
}

It is broken and may be causing the issue. The correct format should be:

$el {
   /* custom styling */
}

$el::before {
   /* custom styling */
}

Be advised that custom coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.