Responsive design is important to ensure that your forum works well on many different devices, especially phones and tablets. XenForo 2 offers many tools and options to customize the interface for mobile. In this article, we’ll show you how to create a responsive interface to improve user experience.
1. Use Viewport Meta Tag
To ensure that content displays properly on mobile screens, you need to add meta tags viewport in section <head> of templates:
<meta name="viewport" content="width=device-width, initial-scale=1.0">This tag helps the browser adjust the scale and size of content to suit the device screen size.
2. Customize Responsive CSS
Use **media queries** to change the way the interface is displayed based on the device’s screen size. You can add responsive CSS to templates or custom CSS files.
@media (max-width: 600px) {
.p-header {
display: none; /* Ẩn tiêu đề trên màn hình nhỏ */ }
.p-content {
padding: 10px; /* Điều chỉnh khoảng cách */ }
}These snippets help hide unnecessary elements on small screens and adjust the layout.
3. Use the Hamburger Menu
Hamburger menus are a good choice to save space on small screens. You can add this type of menu to XenForo’s interface:
<div class="hamburger-menu">
<span>☰ Menu</span>
<ul class="menu-items">
<li><a href="#">Trang Chủ</a></li>
<li><a href="#">Diễn Đàn</a></li>
<li><a href="#">Liên Hệ</a></li>
</ul>
</div>The CSS for this menu could be as follows:
.hamburger-menu .menu-items {
display: none;
}
.hamburger-menu:hover .menu-items {
display: block;
}4. Image Optimization
Using appropriately sized images helps reduce page load time on mobile. You can use the card <img> with attributes srcset to select images suitable for each screen size:
<img src="small.jpg"
srcset="medium.jpg 768w, large.jpg 1200w"
alt="Hình minh họa">5. Test the Interface on Mobile Devices
Once customization is complete, test how it looks on different mobile devices. You can also use the tool Google PageSpeed Insights to test performance and mobile friendliness.
Mobile interface
Creating a responsive interface for XenForo 2 improves user experience and increases mobile traffic. Use media queries, optimize images, and test the theme regularly to make sure your forum works well on all devices.
If you have questions or encounter problems during customization, don’t hesitate to contact us for support.
