Common Mobile Questions

Issue - text on banner too big

Issue - text on banner too big

  • Large text set on desktop mode goes off the screen on mobile.

Screenshot above: Our website viewed on mobile mode in firefox - CTRL + SHIFT + M

Solution - Set a mobile font size via Style Editor 

  1. Click the RED COG icon to launch the Style Editor 
  2. Navigate to the required element and set a mobile font size.

Screenshot above shows the editor in mobile mode. H1 selected and a mobile font size of 10 applied.

Issue - text on banner is crammed together

Issue - text on banner is cramming together

  • Large text set is wrapping with the incorrect line-height screen on mobile.

Screenshot above: Our website viewed on mobile mode in firefox - CTRL + SHIFT + M

Solution - Set a mobile font size via Style Editor 

  1. Click the RED COG icon to launch the Style Editor 
  2. Navigate to the required element and set a mobile line height of 1.0 or 1.2.

Screenshot above shows the editor in mobile mode. H1 selected and a line height of 1.0 enabled.

Issue - content is showing 1 column not 2 down the page

Issue - content is showing 1 column not 2

  • Multi-column content showing across the editor is showing in one column the screen on mobile. This is the default setting for snippet - block content but can be overriden.

Screenshot above: Our website viewed on mobile mode in firefox - CTRL + SHIFT + M

Solution - Set a mobile column size via Style Editor 

  1. Click the RED COG icon to launch the Style Editor 
  2. Click the ROW element if not selected and choose your column size.

Screenshot above shows the editor in mobile mode. row selected and a 2 column layout selected.

Issue - too much space between content

Issue - too much space between Contentbox elements

  • Large vertical spacing set on desktop mode looks gappy on mobile.

Screenshot above: Our website viewed on mobile mode in firefox - CTRL + SHIFT + M

Solution - Set a vertical margin via Contentbox Settings

  1. Click the BLUE COG icon to launch the Contentbox Settings popup.
  2. Select the required spacing from the vertical spacing option.

Screenshot above shows the original 80px spacing on desktop overridden with a 10px margin for the section.