Help Centre

Support > Designing and Building Your Website > Adding Your Content

How to layout your content for responsive templates.

responsive.png


Responsive templates are great to use as they allow your website to adjust automatically to the screen size your visitors are using. This means that your content is fully optimised for desktop, mobile and tablet viewing.

 

How is this different for my content?

In the past you may have used tables with widths and spacing to arrange your content on your pages. This was a handy way to get the exact positioning you wanted for your text and images, but this doesn't work so well for responsive content. If you enter a fixed width to your table, it means your content will not be able to shrink for smaller screens as you are telling the browser that your content can only be this one size.

 

Can I still use tables?

Yes, you can still use tables to arrange your content for responsive templates. You just need to make sure these do not have any size values associated with it.

 

So if you are switching to a responsive template and you have already laid out your content with tables, you can edit your table's properties and delete any assigned sizes.

 

To edit a table, simply right-click on the border and select Table Properties.

 

 

In the pop-up screen, remove any "fixed" value from the width and height columns. These can be left blank and your table will adjust based on the contents, or you can use percentages to determine how much of the space they occupy.

 

 

If you are having any trouble with this, please contact your Account Manager who will be happy to help.

 

Is there another way I can arrange my content without a table?

Yes, you can achieve a nice, simple page presentation by positioning your images and allowing your text to wrap around your image. The steps below will talk you through achieving this on your Create account.

 

Image Alignment

To position images on your page is easy. First you will need to make sure you are familiar with uploading images and adding them to your pages.

Then you can edit the appearance of the image by following these steps:

  1. Log in to your Create account.
  2. Find the page or product you want to arrange and edit it.
  3. Click on the image you wish to edit.
  4. Click the "Insert/edit Image Icon from the toolbar.
  5. Click "Appearence" from the top tabs.

You will then see the following pop up with the following options:

 

Appearance

"Aligment" - Where you want your image to be positioned on your page.

"Dimensions" - The Width and Height of your image in pixels.

"Vertical Space" - Enter a value to put a margin above and below your image.

"Hortizontal Space" - Enter a value to put a margin the left and right of your image.

"Border Size" - Enter a value if you want a border. The number will be the thickness in pixels.

"Border Style" - You can choose a solid, dotted or dashed border from the drop down.

"Border Colour" - Enter a colour reference or use the box to pick a colour for your border.


You will see lots of types under the "Alignment" drop down, but you will most likely either want "Left" or "Right".

Left

This will position your image to the left of the page, and your text will wrap around to the right like this:

Image-left.png

In the example above, the "Alignment" is set to "left" and the "Horizontal Space" is "15".

 

Right

This will position your image to the right of the page, and your text will wrap around to the left like this:

 

image-right.png

 

In the example above, the "Alignment" is set to "right", the "Horizontal Space" is "30" and the text is justified.


When your images are aligned left or right, they will always be in the position no matter what the screen size. Below is an example of the Ventana and Avenue templates on an iPhone screen size with aligned images:

  

photo_2.PNG

Avenue template with a left aligned image on an iPhone.

 

ventana.PNG

Ventana template with a right aligned image on an iPhone.

 
If you have any questions or need any help in getting your perfect layout for your content, please do not hesitate tocontact your Account Managerwho will be happy to advise!