Make rectangle away from title

[MiguelMaya]

We’ve added cool glow effects for the title, however there’s this weird rectangle appearing between the text. Are you able to help me make it go away? I’ll provide the code currently used for the effect on the mobile version.

Using Dawn 15 misteri.ca

[MiguelMaya]

@media only screen and (max-width: 749px) {
  .banner__heading::after {
    content: '';
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 62%;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 10px 60px rgba(255, 255, 255, 1), 0 10px 60px rgba(255, 255, 255, 1), 0 10px 60px rgba(255, 255, 255, 1), 0 10px 60px rgba(255, 255, 255, 1);
    transition: 0.4s ease;
  }
  .banner__buttons .button--secondary {
    box-shadow: 0 0 8px 4px rgba(255, 255, 255, 0.46);
  }

[BSSCommerce-TC · Accepted solution]

Hi @MiguelMaya ,

That’s difficult. You can hide it behind some text.

Try it and double check on your website

@media only screen and (max-width: 749px) {
    .banner__heading::after {
        content: '';
        position: absolute;
        bottom: 50%;
        left: 50%;
        transform: translate(-50%, 50%);
        width: 60%;
        height: 10px;
        background-color: rgba(255, 255, 255, 0.34);
        box-shadow: 0 10px 60px rgba(255, 255, 255, 1), 0 10px 60px rgba(255, 255, 255, 1), 0 10px 60px rgba(255, 255, 255, 1), 0 10px 60px rgba(255, 255, 255, 1);
        transition: 0.4s ease;
        top: 12px;
    }
}