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.

Instructions for Creating a Responsive Mobile Interface
Illustrations.
Table of Contents

    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:

    See also  How to Insert Logo into Forum Interface

    <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.

    Leave a Reply

    Your email address will not be published. Required fields are marked *