_footer.html.erb

<style>
@media (max-width: 992px) {
  #c3se-footer {
    flex-direction: column;
    gap: 1rem;
  }
  #c3se-avail-gpu {
    order: -1;
    text-align: center;
  }
}
</style>

<footer id="c3se-footer" class="d-flex m-0 mt-4 justify-content-between align-items-center p-4">
  <div class="mr-2" style="width: 220px;>
    <%= link_to "https://openondemand.org" do %>
      <%=
        image_tag(
          "OpenOnDemand_powered_by_RGB.svg",
          class: "footer-logo",
          alt: "Powered by Open OnDemand",
          height: "40px",
        )
      %>
  <% end %>
  </div>
  <div id="c3se-avail-gpu" style="display: flex; flex-direction: column;">
    <span>Current number of available GPU's per model</span>
    <iframe
      src="https://grafana.c3se.chalmers.se/d-solo/ddn3wevvyuk8wa/alvis-public-mini?kiosk=&theme=light&orgId=1&panelId=342"
      frameborder="0"
      style="width: 525px; height: 40px;"
    >
    </iframe>
  </div>
  <span style="text-align: center; width: 220px;">OnDemand version: <%= Configuration.ood_version %></span>
</footer>