I am working on a custom footer in Odoo 18 (website module) using QWeb (XML) and custom CSS.
Issue 1:
The social media icons are appearing above the logo, even though in my XML structure the logo is placed first and the social icons are defined below it.
Expected:
The logo should appear first, and social icons should be displayed below it.
Issue 2 (Mobile Responsiveness):
The footer layout breaks on mobile devices because I am using a 5-column grid layout (grid-template-columns: repeat(5,1fr)).
On smaller screens, the alignment becomes inconsistent and not user-friendly.
Expected:
- Proper responsive behavior for tablet and mobile
- 2-column layout for tablets
- Single column layout for mobile
- Centered alignment for better UI
What I tried:
- Used flexbox (flex-direction: column)
- Adjusted spacing and alignment
- Still facing issues in mobile view and inconsistent rendering
Here is my XML code:
<odoo>
<template id="custom_footer_london_bakery" inherit_id="website.layout">
<xpath expr="//footer" position="replace">
<footer class="lb_footer">
<div class="container lb_container">
<div class="lb_grid">
<!-- Logo -->
<div class="lb_col">
<img src="/custom_london_footer/static/src/img/logo.png"
class="lb_logo"/>
<div class="lb_social">
<a href="https://www.facebook.com/londonbakery.qa" target="_blank">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
</svg>
</a>
<a href="https://youtube.com/@londonbakeryqatar" target="_blank">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58 2.78 2.78 0 0 0 1.94 2C5.12 20 12 20 12 20s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z"></path>
<polygon points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02"></polygon>
</svg>
</a>
<a href="https://wa.me/97450968327" target="_blank">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.198.297-.768.966-.94 1.164-.173.198-.347.223-.644.074-.297-.149-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.52.148-.174.198-.297.297-.496.099-.198.05-.372-.025-.52-.075-.149-.669-1.611-.916-2.205-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.793.372-.273.297-1.04 1.016-1.04 2.479s1.065 2.875 1.213 3.074c.148.198 2.095 3.2 5.076 4.487.709.306 1.261.489 1.692.626.711.226 1.358.194 1.87.118.57-.085 1.758-.718 2.006-1.412.248-.694.248-1.289.173-1.412-.074-.124-.272-.198-.57-.347z"/>
</svg>
</a>
<a href="https://www.instagram.com/londonbakeryqatar" target="_blank">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
</svg>
</a>
</div>
</div>
<!-- Contact -->
<div class="lb_col">
<h5 class="lb_title">Contact Us</h5>
<p>Phone: +974 4447 9785</p>
<p>Toll free: 800 6246</p>
</div>
<!-- Clock -->
<div class="lb_col lb_clock_col">
<div class="clock-wrapper">
<svg id="dynamicClock" viewBox="0 0 64 64">
<!-- outer circle -->
<circle cx="32" cy="32" r="30"
fill="white"
stroke="#d1d5db"
stroke-width="1"/>
<!-- hour marks -->
<line x1="32" y1="6" x2="32" y2="10" stroke="#374151" stroke-width="2"/>
<line x1="32" y1="58" x2="32" y2="54" stroke="#374151" stroke-width="2"/>
<line x1="6" y1="32" x2="10" y2="32" stroke="#374151" stroke-width="2"/>
<line x1="58" y1="32" x2="54" y2="32" stroke="#374151" stroke-width="2"/>
<!-- minor ticks -->
<line x1="45" y1="9" x2="43" y2="12" stroke="#9ca3af"/>
<line x1="54" y1="19" x2="51" y2="21" stroke="#9ca3af"/>
<line x1="54" y1="45" x2="51" y2="43" stroke="#9ca3af"/>
<line x1="45" y1="55" x2="43" y2="52" stroke="#9ca3af"/>
<line x1="19" y1="55" x2="21" y2="52" stroke="#9ca3af"/>
<line x1="9" y1="45" x2="12" y2="43" stroke="#9ca3af"/>
<line x1="9" y1="19" x2="12" y2="21" stroke="#9ca3af"/>
<line x1="19" y1="9" x2="21" y2="12" stroke="#9ca3af"/>
<!-- hour hand -->
<line id="hourHand"
x1="32" y1="32"
x2="32" y2="20"
stroke="#374151"
stroke-width="3"
stroke-linecap="round"/>
<!-- minute hand -->
<line id="minuteHand"
x1="32" y1="32"
x2="32" y2="14"
stroke="#374151"
stroke-width="2"
stroke-linecap="round"/>
<!-- second hand -->
<line id="secondHand"
x1="32" y1="32"
x2="32" y2="10"
stroke="#f97316"
stroke-width="1"
stroke-linecap="round"/>
<circle cx="32" cy="32" r="2" fill="#374151"/>
</svg>
<p class="lb_open">Open 24/7</p>
</div>
</div>
<!-- Store Location -->
<div class="lb_col">
<h5>Store Location</h5>
<p>Street No: 40, Zone No: 81</p>
<p>Building No: 63</p>
<p>New Industrial Area</p>
<p>Doha, 20730</p>
<p>Qatar</p>
</div>
<!-- Quick Links -->
<div class="lb_col">
<h5>Quick Links</h5>
<ul class="lb_links">
<li>
<a href="http://187.77.190.216:5000">Home</a>
</li>
<li>
<a href="http://187.77.190.216:5000/products">Products</a>
</li>
<li>
<a href="http://187.77.190.216:5000/our-stories">40 Years of History</a>
</li>
<li>
<a href="http://187.77.190.216:5000/about-us">About Us</a>
</li>
<li>
<a href="http://187.77.190.216:5000/contact-us">Contact Us</a>
</li>
</ul>
</div>
</div>
<hr/>
<div class="lb_bottom">
Copyright © 2026
<span>Made With Love by Hashqubes</span>
</div>
</div>
</footer>
</xpath>
</template>
</odoo>
.lb_footer{
background:#ffffff;
padding:80px 0 60px;
font-family: "Inter", sans-serif;
}
.lb_container{
max-width:1380px;
margin:auto;
padding:0 20px;
}
.lb_grid{
display:grid;
grid-template-columns: repeat(5,1fr);
gap:50px;
align-items:start;
}
/* column base */
.lb_col{
display:flex;
flex-direction:column;
align-items:flex-start;
}
/* headings */
.lb_col h5{
font-size:18px;
font-weight:600;
color:#2b3a67;
margin-bottom:14px;
}
/* text spacing */
.lb_col p{
font-size:15px;
color:#4b5563;
margin:4px 0;
}
/* logo */
.lb_logo{
width:180px;
margin-bottom:18px;
}
.lb_social{
display:flex;
gap:14px;
margin-top:20px;
}
.lb_social a{
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
background:#f3f4f6;
border-radius:50%;
color:#374151;
transition:0.3s;
}
.lb_social a:hover{
background:#e5e7eb;
}
.lb_social svg{
width:18px;
height:18px;
}
/* clock column */
.lb_clock_col{
align-items:center;
text-align:center;
}
.lb_open{
margin-top:12px;
font-size:15px;
color:#374151;
}
/* quick links */
.lb_links{
list-style:none;
padding:0;
margin:0;
}
.lb_links li{
margin-bottom:8px;
}
.lb_links a{
font-size:15px;
color:#4b5563;
text-decoration:none;
}
.lb_links a:hover{
color:#1d3c78;
}
/* divider line */
.lb_footer hr{
margin:40px 0 25px;
border:none;
border-top:1px solid #e5e7eb;
}
/* bottom copyright */
.lb_bottom{
font-size:14px;
color:#6b7280;
}
.clock-wrapper{
display:flex;
flex-direction:column;
align-items:center;
}
#dynamicClock{
width:180px;
height:180px;
}
