website off centre depending on display

masterton said 1 year ago:

Hello,
I am wondering what way would be best to ‘centre’ my website so that the content displays in the centre of the screen regardless of the views monitor size and resolution.
I tried uploading a background image so that it takes up the back of the screen on any size monitor and i want my content (pictures, text, etc) to centre over that.
Any suggestions?

Nate D said 1 year ago:

@masterton – If you can post the web address where this is happening. There are many ways this can be done, but your looking for one that works with your specific situation.

masterton said 1 year ago:

bigtreeathletics.com (i know a lot of my content is off centre but i have trouble moving things around and messing everything up)
thanks for getting back to me!

Nate D said 1 year ago:

@masterton – Blocks that are “undocked” can not be centered like that. I suggest switching your template from “Clean Slate” to “Clean Start”. Then all of your content blocks (yellow outline) should be placed inside of the containers (blue outline).

masterton said 1 year ago:

instead of changing theme, maybe I could just resize the blue boxes to enclose everything on each page, would that help with centring?

Nate D said 1 year ago:

@masterton – The content would still only be centered on the screen size your using to edit the page. The content blocks need to be docked inside of the containers. The template you are using keeps a pad on the left of the screen to accommodate the navigation (which would give you spacing issues), the difference of the other template “Clean Start” is the navigation is across the top.

Nate D said 1 year ago:

@masterton – Hopefully you can get this done before this thread drops off my activity stream, just in case it needs to be further tuned with CSS code. This post is a ‘bump’ which buys you some more time on my activity.

chrisg said 1 year ago:

@masterton,

Just looking into this discussion. Seems @Nate D has you pointed in the right direction for your Website Tonight project.

If are in need of further assistance with identifying elements of your CSS code, do let us know and we can also help out.

Christopher G.

masterton said 1 year ago:

Thank you both!
I will try switching the template tonight, if i switch the template is there a risk i will lose my data?
Am I correct in thinking I will just have to rearrange things?

chrisg said 1 year ago:

@masterton,

The data should not be removed from the content blocks you have already setup in the project. However, it is always recommended to make a backup of your project before proceeding with such changes, just in case.

There is a Backup and Restore feature for Website Tonight that you can use to save specific versions of your site that you can later restore from if necessary. For more on this, simply refer to the following article:

Backing up or Restoring Your Website

Beyond this step and after changing your template, it may be necessary to do a little re-arranging. Not to much usually; it varies on the templates you are changing over to.

Christopher G.

Nate D said 1 year ago:

@masterton – I concur with @chrisg

masterton said 1 year ago:

@Nate D @chrisg

Thanks for your help, although the new template did make it much easier to move and place boxes on my site, the original problem I was looking to correct is still happening. When looking at my site on a widescreen monitor there is space on the right hand side that just shows the “background image” (black floor boards). So although the individual images and text boxes are closer to being centred relative to each other the whole content of my site when viewed on a wider screen is unbalanced and sits to the left of the screen. Wondering if the CSS code you were offering to suggest could help with that ?

chrisg said 1 year ago:

@masterton,

Sorry for the delay. Took a little bit of testing through Firebug plug-ins and eventually looking this over with a developer before we realized your site is still using floating content blocks.

If the content block (the yellow dash boxes) are moved outside of the main content containers (the solid blue boxes), the content is treated like a floating block which uses absolute positioning. Any CSS changes we could try to suggest would have not affect on this content while it is treated like this.

You will need to place these blocks into the main content containers. Once this is done, republish the site so we can review again and we should be better able to recommend what elements to adjust in CSS to dynamically center your content.

Christopher G.

Nate D said 1 year ago:

@masterton – Imma concur again. Remember the template switch was so you could dock the content without the spacing issues of the previous template’s navigation area. Make sure your dragging the content blocks into the containers, and not simply on top of the containers.

The ‘undocked’ content is treated by browsers separate from the layout of your template. Once the content is ‘docked’ you can use a blanket CSS code to fix this on every page on your whole site.

masterton said 1 year ago:

okay thank you i think i’ve done it, just need to get the logo at the top (which is a picture) centred. It is in grey dashed lines but i believe the yellow blocks are now “docked”.