Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] case-study.html and "Features 9" are not compatible with each other #194

Open
polds opened this issue Jul 8, 2023 · 0 comments
Open

Comments

@polds
Copy link

polds commented Jul 8, 2023

Version

3.0.4

Reproduction link

https://jsfiddle.net/nujbt8de/ - No CSS / JS, save locally

Operating System

At least macOS + Android

Device

mac book pro + Galaxy S23 Ultra

Browser & Version

Chrome 114.0.5735.133

Steps to reproduce

  1. Open pages/case-study.html in a text editor
  2. Below the header section copy and paste the example "Features 9" (from sections/page-sections/features.html) without any modification:
<section class="">
  <div class="container py-5">
    <div class="row align-items-center">
      <div class="col-md-6 mb-md-0 mb-4">
        <h3>Very nice subtitle</h3>
        <p class="lead mb-md-5 mb-4">
          Change the color to match your brand or vision, add your logo, choose the perfect thumbnail, remove the playbar, add controls and more.
        </p>
        <p><span class="me-2">&#9679;</span> Showcase and embed your work with</p>
        <p><span class="me-2">&#9679;</span> Publish across social channels in a click</p>
        <p><span class="me-2">&#9679;</span> Sell your videos worldwide</p>
        <p><span class="me-2">&#9679;</span> Make more profit</p>
      </div>
      <div class="col-md-6">
        <div class="blur-shadow-image text-center">
          <img src="../../assets/img/examples/blog2.jpg" alt="img-shadow" class="img-fluid shadow-xl border-radius-lg max-height-500">
        </div>
      </div>
    </div>
  </div>
</section>
  1. Save and refresh the page

What is expected?

What is shown in Features 9 is displayed, no other section on the page is affected by adding the section.

What is actually happening?

The image from Features 9 is somehow set as a blurred background for the header section. See this screenshot:

If you remove the class "blur-shadow-image" from the Features 9 example it removes it from the background header - but also does not add the blurred shadow.

I do not see similar behavior with other code snippets like "Features 8" which use the same class.


Solution

Additional comments

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant