-1

I have a Magento2.4 based site and I edited the default.xml to load static cms block in the footer div and align them next to each other. My issue is one of the static blocks keeps appear outside the container element I am trying to set it to load inside of and I am not sure why.

Here is my default.xml

<body>
<!-- footer One -->
<block class="Magento\Cms\Block\Block" name="footer_first">
  <arguments>
    <argument name="block_id" xsi:type="string">footer_first</argument>
  </arguments>
</block>
<move element="footer_first" destination="footer" before="-"/>

<!-- footer second -->
<block class="Magento\Cms\Block\Block" name="footer_second">
  <arguments>
    <argument name="block_id" xsi:type="string">footer_second</argument>
  </arguments>
</block>
<move element="footer_second" destination="footer" after="footer_first"/>

<!-- footer third -->
<block class="Magento\Cms\Block\Block" name="footer_third">
    <arguments>
      <argument name="block_id" xsi:type="string">footer_third</argument>
    </arguments>
</block>
<move element="footer_third" destination="footer" after="footer_second"/>

<!-- footer forth -->
<block class="Magento\Cms\Block\Block" name="footer_fourth">
  <arguments>
          <argument name="block_id" xsi:type="string">footer_fourth</argument>
  </arguments>
</block>
<move element="footer_fourth" destination="footer" after="footer_third"/>

However, what's happening is the footer_fourth is loading outside of the <div class="footer"> div while all the others are loading inside of it?

Here is the code from a view source of the page when I go to it in a browser

  <footer class="page-footer"><div class="footer content"><div class="col-sm-3 text-center">
  <h2>Sign up &amp; Save 20%</h2>
  <div class="block newsletter">
      <div class="title"><strong>Newsletter</strong></div>
      <div class="content">
        <form class="form subscribe" novalidate="novalidate" action="http://******.com/newsletter/subscriber/new/" method="post" id="newsletter-validate-detail">
        <div class="field newsletter">
            <div class="control">
                <label for="newsletter">
                    <span class="label">
                        Sign Up for Our Newsletter:                        </span>
                    <input name="email" type="email" id="newsletter" placeholder="Enter your email address" data-validate="{required:true, 'validate-email':true}">
                </label>
            </div>
        </div>
        <div class="actions">
            <button class="action subscribe primary" title="Subscribe" type="submit" aria-label="Subscribe">
                <span>Subscribe</span>
            </button>
        </div>
    </form>
</div>


<h2>About Us</h2>
<p>place holder text here.</p>
 </div><div class="col-sm-3 text-center">

     <h2>More on Us</h2>
     <ul>
           <li><a href="#" aria-label="About Us link" title="About us">About us</a></li>
           <li><a href="#" aria-label="Conflict-Free link" title="Conflict-link">Conflict-link Diamonds</a></li>
           <li><a href="#" aria-label="Shipping&amp; Returns Link" title="Shipping &amp; Returns">Shipping &amp; Returns</a></li>
           <li><a href="#" aria-label="Privacy Policy Link" title="Privacy Policy">Privacy Policy</a></li>
           <li><a href="http://****.com//contact" aria-label="Contact Us Link" title="Contact Us">Contact Us</a></li>


   </div><div class="col-sm-3 text-center">
     <h2>Help &amp; Faqs</h2>
      <ul>
      <li><a href="#" title="My Account">My account</a></li>
      <li><a href="#" title="Order History">Order history</a></li>
      <li><a href="#" title="Track My Order">Track my order</a></li> 
      <li><a href="#" title="FAQ's">FAQ's</a></li> 
  </ul>
</div>
</div><div class="col-sm-3 text-center">
<h2>Follow us!</h2>
<ul>
    <li class="in">&nbsp;</li>
    <li class="fb">&nbsp;</li>
    <li class="yu">&nbsp;</li>
    <li class="tw">&nbsp;</li>
    <li class="pt">&nbsp;</li>

Improve this question
1
  • Please format the code in your question correctly....
    – Black
    Feb 28, 2020 at 18:45

1 Answer 1

Reset to default
0

Can you please try this?

<referenceContainer name="footer">
    <!-- footer One -->
    <block class="Magento\Cms\Block\Block" name="footer_first">
      <arguments>
        <argument name="block_id" xsi:type="string">footer_first</argument>
      </arguments>
    </block>

    <!-- footer second -->
    <block class="Magento\Cms\Block\Block" name="footer_second">
      <arguments>
        <argument name="block_id" xsi:type="string">footer_second</argument>
      </arguments>
    </block>

    <!-- footer third -->
    <block class="Magento\Cms\Block\Block" name="footer_third">
        <arguments>
          <argument name="block_id" xsi:type="string">footer_third</argument>
        </arguments>
    </block>

    <!-- footer forth -->
    <block class="Magento\Cms\Block\Block" name="footer_fourth">
      <arguments>
          <argument name="block_id" xsi:type="string">footer_fourth</argument>
      </arguments>
    </block>

</referenceContainer>
Improve this answer
2
  • that did not work. I ran upgrade compile and delploy after I edited my default.xml to match what you had.
    – Jayreis
    Mar 1, 2020 at 2:51
  • You have to clear the layout and full_page cache
    – Black
    Mar 2, 2020 at 7:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.