BuddyX
Get BuddyX Pro

Mobile & Responsive FAQ

Free & Pro

Quick answers about mobile display and responsiveness.

Mobile Support

Is BuddyX Pro mobile responsive?

Yes, fully responsive and mobile-first. Tested on:

  • iOS (iPhone, iPad)
  • Android (phones, tablets)
  • All modern browsers

How does the menu work on mobile?

At the hamburger breakpoint (768px by default) and below:

  • Navigation collapses to a hamburger icon
  • Tap to open the mobile menu drawer
  • Touch-optimized with larger tap targets

The breakpoint is adjustable in the Customizer (see "Can I change the mobile menu breakpoint?" below).

Mobile Issues

Mobile menu won't open

Common fixes:

  1. Clear all caches - Browser, plugin, CDN
  2. Disable JS minification in caching plugin
  3. Check for JavaScript errors - Browser console (F12)
  4. Test in incognito mode - Rules out extensions

Elements overlap on mobile

  1. Check custom CSS - Your CSS may not be responsive
  2. Use browser dev tools - Find exact breakpoint where it breaks
  3. Add mobile CSS:
@media (max-width: 767px) {
    /* Your mobile fixes */
}

Text too small on mobile

  1. Appearance > Customize > Typography > Body
  2. Increase Font Size
  3. Use the mobile preview icon to check

Or add CSS:

@media (max-width: 767px) {
    body { font-size: 16px; }
}

Images overflow on mobile

Add to Additional CSS:

img {
    max-width: 100%;
    height: auto;
}

Mobile Customization

Can I use a different logo on mobile?

BuddyX Pro does not have a separate mobile logo upload field. It uses the one logo set in Appearance > Customize > Site Identity, scaled responsively. To swap it on small screens, upload the mobile image to the Media Library and swap it with CSS:

@media (max-width: 767px) {
    .site-branding img { content: url('https://yoursite.com/mobile-logo.webp'); }
}

Can I hide elements on mobile?

Use CSS:

@media (max-width: 767px) {
    .element-to-hide { display: none; }
}

How do I test mobile display?

Quick test:

  • Browser dev tools (F12 > Toggle device toolbar)
  • Customizer preview (mobile icon at bottom)

Accurate test:

  • Real iPhone and Android devices
  • BrowserStack or LambdaTest (online tools)

Breakpoints

What breakpoints does BuddyX Pro use?

Breakpoint Device
1200px+ Desktop
1024px Tablet landscape
768px Tablet portrait
480px Large phone
320px Small phone

Can I change the mobile menu breakpoint?

Yes, from the Customizer - no code required:

  1. Go to Appearance > Customize > Site Header
  2. Set the Hamburger Menu Breakpoint slider (in pixels)
  3. Click Publish

This is the screen width where the header switches from the desktop menu to the hamburger menu. The default is 768px, and the slider accepts values from 768 to 1600.

Related

Got a question? We're a friendly team - happy to help. Email support@wbcomdesigns.com