search

creativetimofficial / ct-material-kit-pro

Premium Bootstrap 4 UI Kit based on Google's Material Design
https://www.creative-tim.com/product/material-kit-pro
128 stars 36 forks source link

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

Open polds opened 1 year ago

polds commented 1 year ago

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