Skip to content
Docs

Mobile & Responsive FAQ

Quick answers about mobile display and responsiveness.

Mobile Support

Section titled “Mobile Support”

Is BuddyX Pro mobile responsive?

Section titled “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?

Section titled “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

Section titled “Mobile Issues”

Mobile menu won’t open

Section titled “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

Section titled “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

Section titled “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

Section titled “Images overflow on mobile”

Add to Additional CSS:

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

Mobile Customization

Section titled “Mobile Customization”

Can I use a different logo on mobile?

Section titled “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?

Section titled “Can I hide elements on mobile?”

Use CSS:

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

How do I test mobile display?

Section titled “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

Section titled “Breakpoints”

What breakpoints does BuddyX Pro use?

Section titled “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?

Section titled “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.

Section titled “Related”

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