Change Subscribe Form position from last to first in Footer List on mobile

[Giftay]

Hi, I've been looking all over the code (and the web) and couldn't find a solution for this. If there's anyone out there willing and able to help I'll be so thankful.

We have a subscribe form in our footer, and on desktop, it's the element on the top:

However, when on mobile, that section goes to the bottom, below the navigation links and other blocks:

I have changed the code so the collapsable list item is always open, so it's at least shown, but we would like to bring it up to the top so it shows right after the page content, just like on desktop.

This is the only piece of code I've found (in footer-template.liquid) that has all those items in one place:

<footer class=" {% if template == 'index' %} {{ item.top_offset }}{% else %} {{ item.top_offset_normal }}{% endif %}">
  
  {%- include "footer_subscribe" -%}
  {%- if flp < flp2 -%}
  {%- include "footer_links" -%}
  {%- include "footer_links_des2" -%}
  {%- else -%}
  {%- include "footer_links_des2" -%}
  {%- include "footer_links" -%}
  {%- endif -%}
  {%- include "footer_copyright" -%}

</footer>

Any ideas how to do that? Where in the files would that be? We are using the Wokiee theme and the site in question is https://giftay.eu – thanks for any help!

[Prashant-Patel]

Hi @Giftay 

I will give you a piece of code you need to add to the theme.css file.

Go to assets then find the theme.css file.

Add this code last in the file.

@media (max-width: 789px) {
    .tt-footer-custom.tt-color-scheme-04 {
        order: 3 !important;
    }
    .tt-footer-custom.tt-color-scheme-02 {
        order: 1 !important;
    }
    .tt-footer-col.tt-color-scheme-03 {
        order: 2 !important;
    }
}

[Giftay]

Thank you for your help. I managed to remove already existing CSS for ordering, which I find to be a better practice, but good direction otherwise.

[iffikhan30 · Accepted solution]

Hello @Giftay ,

You can remove the order list code, you problem will be solved.

[Giftay]

Thank you for your help, Irfan. I have removed the following code from the theme.css file and it works:

  footer .tt-footer-custom:not(:last-child){
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
  }