Make glow effect auto play on mobile site version

[MiguelMaya]

My site has cool glow effect when hovering over the banner and the main button. That only works on desktop because of the hovering mechanic. It’d be crazily cool to make it play automatically by itself after loading the site on the mobile version. Are able to help me do that? Thanks!

Using Dawn 15 misteri.ca

Code used:

.banner__heading {
  position: relative;
  display: inline-block;
  text-align: center; /* Center-align the content */
}
.banner__heading {
  display: block;
  max-width: 100%;
  height: auto;
  position: relative;
}
.banner__heading::after {
  content: '';
  position: absolute;
  bottom: 50%; /* Position the underline centered vertically */
  left: 50%; /* Position the underline centered horizontally */
  transform: translate(-50%, 50%); /* Adjust to center the underline */
  width: 80%; /* Adjust the width of the underline */
  height: 5px;
  background-color: transparent;
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0); /* Initial box-shadow (transparent white), wider spread */
  transition: box-shadow 0.4s ease; /* Smooth transition for the glow effect */
}
.banner__heading:hover::after {
  background-color: rgba(255, 255, 255, 0.04);
  box-shadow: 0 10px 60px rgba(255, 255, 255, 1); /* White glowing effect on hover, even wider spread */

[BSSCommerce-B2B]

Hi @MiguelMaya ,

I have checked your website on desktop view. I found on inspect view, your theme use this script code to glow effect button when hover:

So, you just need to edit css script and the issue can be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

@media only screen and (max-width: 768px) {
    .banner__buttons .button--secondary:hover {
        box-shadow: 0 0 8px 4px rgba(255, 255, 255, 0.46) !important;
    }
}

In this step, you can added this code as same as in desktop view into mobile view (max-width: 768px)

Step 3: Save your code and reload this page.

I hope these instructions will help you. If they are helpful, please let us know by giving likes and mark as the solution.

Thanks in advance.

Have a nice day sir!

[GTLOfficial]

Hello @MiguelMaya
Go to online store ---------> themes --------------> actions ------> edit code------->base.CSS
and add this code at the bottom of the file.

@media screen and (max-width: 768px) {
.banner__buttons .button--secondary:hover {
box-shadow: 0 0 8px 4px rgba(255, 255, 255, 0.46); !important
}
}

If this was helpful, hit the like button and mark the job as completed.
Thanks

[BSS-TekLabs]

Hi @MiguelMaya,

You can follow these steps to make the glowing effect default on mobile

1. Open Online Store > Theme > Edit Code

2. Find and open the base.css (or theme.css, custom.css) file

3. Paste the code snippet below at the bottom of the file and hit save

/* In case you didn't add the code for making the glow effect stronger first */
.banner__heading {
  display: block;
  max-width: 100%;
  height: auto;
  position: relative;
}
.banner__heading::after {
  content: '';
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  /* You can change this value to make the shadow longer */
  width: 96%;
  /* You can change this value to make the show wider and stronger */
  height: 10px;
  background-color: transparent;
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0);
  transition: 0.4s ease;
  
}
.banner__heading:hover::after {
  background-color: rgba(255, 255, 255, 0.42);
  /* You can change the 3rd parameter to make the blur wider */
  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);
}

/* This is the code for making the glow effect default on mobile */
/* You can change the value of max-width to the mobile break point of your preference */
@media only screen and (max-width: 749px) {
  /* These value need to match the value of the hover state */
  .banner__heading::after {
    width: 62%;
    background-color: rgba(255, 255, 255, 0.42);
    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);
  }

  /* If you want the button to be glowing as well, paste in this code too */
  /* These value need to match the value of the hover state */
  .banner__buttons .button--secondary {
    box-shadow: 0 0 8px 4px rgba(255, 255, 255, 0.46);
  }
}

Here is the result

Hope this helps you solve the issue.

Please don’t forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

[MiguelMaya]

This is how it’s looking on my end after adding the code. Are we able to remove that weird white line in the middle? Everything else looks neat.

[BSS-TekLabs]

Hi @MiguelMaya ,

Sorry, but you need to add all the above code snippets for it to work correctly. If you want to use the box-shadow and not the text-shadow without changing the HTML but only via CSS, we can just make the line seem almost invisible.

You can update the code for mobile like this

@media only screen and (max-width: 749px) {
  .banner__heading::after {
    width: 62%;
    /* The opacity of the box was changed to 0.35 */
    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);
  }

  .banner__buttons .button--secondary {
    box-shadow: 0 0 8px 4px rgba(255, 255, 255, 0.46);
  }
}

Here is the result

Hope this helps you solve the issue.

Please don’t forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

[MiguelMaya]

I’m adding the snippet just like that and my phone still loads that white line even using different web browsers.