1 Reply Latest reply on May 4, 2016 11:15 PM by priyanka_mathur

    Target Offer exchanged due to CSS collision on the page

    sanjeevdogra

      1. I dropped the Text Component twice on the page and configured the default text as follows:

      <div>
      <!-- component A -->
          <div>
              Company Financing
          </div>
      <!-- component B -->
          <div>
              Our Accounting
          </div>
      </div>


      2. I have a Target A/B activity created to change the text Company Financing->Finance and Our Accounting->Accounts. This is working fine and the page shows the text as:
      <div>
      <!-- component A -->
          <div>
              Finance
          </div>
      <!-- component B -->
          <div>
              Accounts
          </div>
      </div>

      3. Next I swapped the components on the page from author as follows:
      <div>
      <!-- component B -->
          <div>
              Our Accounting
          </div>
      <!-- component A -->
          <div>
              Company Financing
          </div>
      </div>

      4. However when I access the page from site, it changed shows me the output as follows, I was expecting Accounts in Component B and Finance under Compnent A :
      <div>
      <!-- component B -->
          <div>
              Finance
          </div>
      <!-- component A -->
          <div>
              Accounts
          </div>
      </div>


      On further troubleshooting it seems Target apply the changes based on the css selector, so Target change the text no matter what is the current text.  I can think of adding a special css class for such text.

      Any recommendation to design our components to make Target Friendly. Like create unique css class etc.?