Please help…….

Any width, height or position changes should be in the CSS file for the theme itself.

I found the following within the CSS file:

/******************
* FOOTER *
******************/
#footer {
background: #bdd6ff;
margin: 15px 0 0 0;
padding: 10px;
color: #666;
line-height: 20px;
list-style: none;
}

#footerbox {
background: #fff;
padding: 10px;
}

#footerbox ul li {
list-style: none;
margin: 0;
background: #fff;
padding: 3px 0 3px 0;
border-bottom: 1px solid #f0f0f0;
}

#footerbox .box {
width: 298px;
margin: 0 15px 0 0;
}
#footerbox h3 {
margin: 0;
padding: 0 10px 0 0;
background: #fff;
color: #666;
font-size: 15px;
font-weight: bold;
}

#footerbox ul ul {
display: none;
}
#footerbox img {
padding: 5px;
}

/******************
* BOTTOM *
******************/
#bottom {
background: #bdd6ff;
margin: 15px 0 0 0;
padding: 10px;
color: #666;
line-height: 15px;
}

#bottom a {
border-bottom: 1px dotted #666;
}

#bottom a:hover {
border-bottom: none;
}

#bottombox {
background: #fff;
height: 15px;
padding: 10px;
}

I actually did change the width (highlighted above) to 150px, but this did not do anything to the footer box width!!!

Any suggestions on what to do?

Firstly you need to add something like this to your CSS:

#footer {
	background: #bdd6ff;
	margin: 15px 0 0 0;
	padding: 10px;
	color: #666;
	line-height: 20px;
	list-style: none;
	width: 500px;
}

So you need to specify the width of the whole footer.

Just move the whole footer div inside the wrapper div and then in your CSS set the #footer to 630px width.

After what line do I add the above?

Or doesn’t it matter?

Also noticed you have another div at the bottom of the page called #bottom . Add a width to this as well

#bottom {
	background: #bdd6ff;
	margin: 15px 0 0 0;
	padding: 10px;
	color: #666;
	line-height: 15px;
width: 630px;
}

Apoel – find the line of code in your CSS called #footer, and simply add this exactly after the {
width:630px;
and the same for the #bottom section

I have just specified the width to 500px, and the footer has narrowed.

https://cyprus-now.com/

Now I need to move it to the right!

Is the while footer inside the wrapper div in footer.php?

I have made the following changes as instructed!

/******************
* FOOTER *
******************/
#footer {
background: #bdd6ff;
margin: 15px 0 0 0;
padding: 10px;
color: #666;
line-height: 20px;
list-style: none;
width: 630px;
}

#footerbox {
background: #fff;
padding: 10px;
}

#footerbox ul li {
list-style: none;
margin: 0;
background: #fff;
padding: 3px 0 3px 0;
border-bottom: 1px solid #f0f0f0;
}

#footerbox .box {
width: 298px;
margin: 0 15px 0 0;
}
#footerbox h3 {
margin: 0;
padding: 0 10px 0 0;
background: #fff;
color: #666;
font-size: 15px;
font-weight: bold;
}

#footerbox ul ul {
display: none;
}
#footerbox img {
padding: 5px;
}

/******************
* BOTTOM *
******************/
#bottom {
background: #bdd6ff;
margin: 15px 0 0 0;
padding: 10px;
color: #666;
line-height: 15px;
width: 630px;
}

#bottom a {
border-bottom: 1px dotted #666;
}

#bottom a:hover {
border-bottom: none;
}

#bottombox {
background: #fff;
height: 15px;
padding: 10px;
}

The footer and bottom box now need to be centred!

https://www.cyprus-now.com

YOu want to ad a margin in as well, something like:
margin: 10px 0px 10px 190px;
Where the last value is the margin to the left.

I have now made the following changes:

#footer {
background: #bdd6ff;
margin: 15px 0 0 0;
padding: 10px;
color: #666;
line-height: 20px;
list-style: none;
width: 915px;
margin: 10px 0px 10px 190px;

And this:

#bottom {
background: #bdd6ff;
margin: 15px 0 0 0;
padding: 10px;
color: #666;
line-height: 15px;
width: 915px;
margin: 10px 0px 10px 190px;

I changed the 630 value to 915, because I need to get the footer and bottom box in line with the post bos and the right widget columns.

Do you now what figure I should put for the width and the margin to get perfect alignment? Or is it a case of trial and error?

https://www.cyprus-now.com

Actually I’m talking nonsense mate. Post this into your footer thing:

#footer {
background: #bdd6ff;
padding: 10px;
color: #666;
line-height: 20px;
list-style: none;
width: 915px;
margin-left: auto;
margin-right: auto;

This will dead center it. Then with your bottom box:

#bottom {
background: #bdd6ff;
margin: 15px 0 0 0;
padding: 10px;
color: #666;
line-height: 15px;
width: 915px;
margin-left: auto;
margin-right: auto;

Note the auto instead of a number. This means it’ll always be dead center no matter how big the window.

I made the margin left and margin right to auto!

Problem solved!

Thank you very very very much robrat! ??