How to edit on Mobile

A crucial aspect of website design is ensuring that it is visually appealing and functional on mobile devices. With the increasing number of people accessing the internet through their smartphones and tablets, it is essential to optimise websites for mobile viewing. To ensure that your website's information is displayed correctly and aligns with your desired design, we have prepared a comprehensive guide to assist you in this process. This guide will provide you with valuable insights and tips on how to make your website mobile-friendly, allowing your users to have a seamless and enjoyable browsing experience. 

Quick Links: 

Columns on Mobile

Stack Background

Spacing between Stacks or Columns

Grid Gallery

Buttons

Header and Menu

How to view your website on mobile before it goes live? 

There are 2 options for this: 

1. Head to your Rocketspark Dashboard. Once there click on Preview.
   
   Then make sure to select the mobile phone icon next to this bar.
   
   
   This will show you what it looks like on mobile. 
   
   
2. The other option is to head to your Rocketspark Dashboard. 
   Copy the link that appears in your Dashboard when your website is toggled online.  You can then paste that link into your mobile device and see how it appears on mobile. 
   

Columns on Mobile: 

You may have more than one column on desktop view but you want the content to show one column at a time on mobile. 

1. Log into your Rocketspark Dashboard
2. Head to the stack you would like to edit and click on Edit Design (colourful circle)
   
3. Head to Width and Spacing
   
4. Once you are there, you will just need to make sure that you are in Mobile View, as it automatically pulls through the Desktop version. 
   
5. Select the dropdown under Column Wrapping
   
   
   How it looks through One column on mobile           How it looks through Two column on mobile
    
   

Stack Background:

Sometimes you may have a picture in your stack background and it looks great on desktop but it might not look right on mobile. You can remove the image and have it as a solid colour on mobile without affecting your desktop view. 

1. Head to the stack you would like to edit and click on Edit Design (colourful circle)
   
2. Select Stack Background
   
3. Once there, there will be an option to Hide picture on mobile make sure the box next to this is ticked. Please note that you can also change the colour of the stack background that is shown on mobile. 
   

This is what the stack will look like once the image has been removed: 

Spacing between stacks or columns: 

If there is more space than you think is needed between stacks or even columns,  you are able to control this, or you could even add more spacing in. 

An example of too much spacing could be:
You aren't able to see any of the other content that is on the page. 

1. Log into your Rocketspark Dashboard
2. Head to the stack you would like to edit and click on Edit Design (colourful circle)
   
3. Head to Width and Spacing
   
4. Make sure you are on mobile view
   
   
5. Once there you will be able to see different settings that you are able to change to view the other content on the website in the same screen. In this example, I have set it all to 0
   What it was before:                                                            What it looks like after:
                  
   
        
6. Please make sure to save every change that you make!

How to edit Grid Gallery for mobile: 

You may not like the way the grid gallery looks on your mobile or you may just want to explore how else the mobile version of your website can look.

1. Log into your Rocketspark Dashboard 
2. Head to the grid gallery that you would like to change and select the edit pencil. 
   
3. Click on the mobile option
   
4. You will then see the different option such as columns and the text size for mobile. 
   
   One Column:                                  Four Column:                             Two Columns: 
         

Buttons: 

If you notice that your buttons on mobile are two big for the screen size, there is a two ways of making this change. 

Option 1: 

1. Log into your Rocketspark dashboard 
2. Head to Change Design in the top left corner
   
3. Select Buttons
   
   
4. Make sure you are in mobile view and then you are able to change the default size of the text in the button.
   

Option 2: 

1. Log into your Rocketspark dashboard 
2. Go to the stack that the button and hit Edit Design (colourful circle)
   
3. Through Stack Designs select Buttons
   
4. Once there, please make sure you are in Mobile view. You will be able to change the text size for the button as well as the colour of the button
   

Text size to big:                                                             Text size is good: 
               

Header and Menu: 

If you notice on mobile that you are not able to see your menu items, you can change this through here. 

1. Log into your Rocketspark dashboard 
2. Head to Change Design in the top left corner
   
3. Select to Header and Menu
   
4. Make sure to select mobile view
   
5. You are then able to change the colour of the icons. Please go to mobile view to check the changes. 

Before changing it on mobile: 

After changing it on mobile: 

If you have any questions at all, please feel free to reach out to the support team via email, support@rocketspark.com.