Important:  If you have signed up after the 7th of June 2023, the aspect of a 'feature area' is no longer available. You can create a similar design of a feature area at the very top of your pages by using a linked stack layout.  You can further adjust the stack for mobile view through the stack design settings. 

With more than half of website traffic now coming from mobile devices, it is very important to get that first impression right. We've taken mobile responsiveness a step further with the new Mobile Feature Area editing controls. It's even easier to create a beautifully simple and appealing mobile website with the ability to adjust your feature area height, text size and styling, position and image to fit your mobile screen.

Here's how to edit how your website feature area appears on a mobile screen:

1. Log in to your Rocketspark Dashboard.
   
   
2. Click on Edit Website or select Editor from the slider in the top-middle of your dashboard homepage.

3. Click the pencil icon which will appear in the top-middle of your feature area.

4. Click on pencil icon in the feature area and the navigation bar will appear on the left-hand side of the screen — click on the Feature area design settings toggle as square in red in the image below:

5. A new tab will open, with the option to select either the Desktop or Mobile editor - to edit the Mobile Feature Area you will need to click onto Mobile. Feature Area Height, Text Styling and Text Position will appear as pictured below.

6. Under Feature Area Height, you can select the Full Height Feature Area option which will set the image in the feature area to full height. You can also drag the arrow at the bottom of the preview screen up or down to show more or less content. Dragging the arrow scales your image proportionally, so if you drag up, you'll see more of your image in the Mobile Feature Area.

7. Text Styling allows you to edit the mobile heading text size, mobile blurb text size and mobile button text size. Sometimes changing the size of text can result in text overlapping an important part of your image. This is when the Text Position tool comes in handy.

8. The Text Position tool allows you to pin the text to any part of the page. Remember to always save the changes you've made! Once you've saved changes, go back by clicking on the blue arrow on the left-hand side of the screen and clicking the big blue Save Changes button.

How to drag an image sideways:

You've got even more flexibility in choosing images for your website because you can adjust which part of the image you want to be shown on mobile, this is how you do it:

1. Go back to the main Edit Website page where you first clicked on the pencil icon.

2. From here you need to switch over to Mobile Preview Mode at the top-middle of the page (the icon will look like the image shown below).

3. Go to the navigation bar on the left-hand side of the screen, scroll down and under Slide 1 click Reposition.

4. You can now easily reposition the image so that the focal point is in view by dragging sideways.

5. Once you have the image positioned where you'd like it - click the blue arrow on the left-hand side of the screen to take you back, then click the big blue Save Changes button.