Having a mobile-friendly website is essential for reaching your audience wherever they are. All websites built on Bandzoogle are fully responsive, meaning that a mobile version of your site is automatically generated and adapts perfectly to any screen size. However, while much of the mobile design is handled for you, there are still several customizable aspects that allow you to tailor the mobile experience to better reflect your brand and meet the needs of your visitors.

This Help article includes:

  • How to customize your header image size for mobile
  • Customizing your logo size on mobile
  • How to customize your website's menu on mobile
  • Previewing your mobile website

How to customize your header image size for mobile

Your header image can be cropped differently for desktop and mobile. Due to the difference in aspect ratios between the screens of mobile devices, and the fact that devices are most often viewed in portrait orientation, you may find that your header image gets cropped too much when viewed on a smartphone.

To customize the size of your header image on mobile, follow these steps:

  1. Click on the 'Edit Theme' tab at the top of your control panel
  2. Toggle on the 'Custom mobile header height' setting, which will reveal the 'Header height (mobile)' slider

Note: When in the 'Edit Theme' tab, you can click the smartphone icon in the top-right corner to switch to previewing your mobile site while customizing your header.

  1. Adjust the 'Header height (mobile)' slider to get the desired height for your image on mobile

Customizing your logo size on mobile

You may find that your logo displays too large when viewed on mobile devices, obstructing views of your header image - or it might be a little too small for your liking. The size of your logo can be adjusted specifically for mobile using these steps:

  1. Click on the 'Edit Theme' tab
  2. In the control panel on the left of the screen, scroll down to the 'Title/Logo' controls
  3. Toggle on the 'Custom mobile size' setting
  4. Use the 'Mobile logo size' slider to increase or decrease the size of your logo

How to customize your website's menu on mobile

Your mobile website's menu will have a solid color background, which the desktop version of your site may not have. To customize the font color and background color of your mobile website's menu, follow these steps:

  1. Click on the 'Edit Theme' tab
  2. In the control panel on the left of the screen, scroll down to the 'Menu' controls
  3. Adjust your 'Mobile font color' and 'Mobile background color' settings

Previewing your mobile website

  1. From the 'Edit Content' tab click 'View site' in the top right corner
  2. Click the smartphone icon next to the 'Edit site' button in the upper right corner