9 replies [Last post]
clovisd
clovisd's picture
Offline
newbie
Tournai, Belgium
Last seen: 7 years 37 weeks ago
Tournai, Belgium
Timezone: GMT+5
Joined: 2013-02-04
Posts: 5
Points: 8

I am trying to get my wordpress powered Home Page to be centered on any screen size, so it does not get repeated and the images do not get repeated.

See concept Image: http://puu.sh/1XpBP

I am currently using the Swatch theme (if that helps). I would really like to be able to sue this (above concept^^) on my website as it would allow me to use images that would not be stretched out or duplicated on ether or both the x and y axis.

Thanks in Advance.
Clovis

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 21 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Wrapper?

Does the page have a wrapper around everything? If so, simply apply a width, for example a percentage or fixed, and set the lateral margins to auto. Otherwise, give us a link to the page and perhaps we can suggest something.

Also, as our resident WP expert says, check the theme author's support.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

clovisd
clovisd's picture
Offline
newbie
Tournai, Belgium
Last seen: 7 years 37 weeks ago
Tournai, Belgium
Timezone: GMT+5
Joined: 2013-02-04
Posts: 5
Points: 8

Wrapper?

I'm a total n00b at this! Tongue

I have checked with WooThemes (makers of Swatch, the WP I use and they have no support what so ever with free themes). So I was referred here by the Wordpress forums mod's.

Anyway, I have no idea how to check for a wraper Tongue
Here is my current style.css file:: https://ignite.io/code/5111005fec221e6a1b000004
and my website is running the newest version of wordpress at: www.ouab.x10.mx

Sorry,
and Thanks for the help,
Clovis <-N00B

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 42 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Please don't post abstracted

Please don't post abstracted links, or short urls two reasons you rely on a service translating the link that may not be around for ever and secondly and more importantly it hides the true destination thus we do not no where we are being directed. I for one never click short urls links unless I know the person posting the link.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

clovisd
clovisd's picture
Offline
newbie
Tournai, Belgium
Last seen: 7 years 37 weeks ago
Tournai, Belgium
Timezone: GMT+5
Joined: 2013-02-04
Posts: 5
Points: 8

Short Links.

Not one of those are short links Puzzled

The ouab.x10.mx is the website page as requested earlier up, its still a free host since I see no point paying as long as it hasn't be completely built;
whilst the ingnitio link is a service like paste-bucket more oriented towards web code (Css, html, ect).

I do not see what you mean by saying this. Also, the very top link is an image link from a server called puush which uploads and screen-prints stuff for you. Steve

clovisd
clovisd's picture
Offline
newbie
Tournai, Belgium
Last seen: 7 years 37 weeks ago
Tournai, Belgium
Timezone: GMT+5
Joined: 2013-02-04
Posts: 5
Points: 8

Can anyone help? Don't mean

Can anyone help? Don't mean to be a jerk but I have no idea what to do! Glasses

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 42 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Not sure what to suggest

Not sure what to suggest other than what Gary already suggested, you may need to move all your graphics to body & child elements, and max-width body and auto margin - bear in mind that html /the viewport is continuous and will always be as wide as the browser is asked to be. That may well not help though!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 21 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Try this at line 142 of

Try this at line 142 of style.css:

#wrapper {
    background: url("images/wrapper-bg-colourstrip.png") repeat-x scroll left top transparent;
    margin: 0 auto;
    max-width: 1250px;
    min-width: 900px;
    padding-top: 5px;
    width: 90%;
}

Keep in mind that I am not a WordPress kinda guy.This may create problems with themes, sub-themes and plugins. You'll just have to test.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

clovisd
clovisd's picture
Offline
newbie
Tournai, Belgium
Last seen: 7 years 37 weeks ago
Tournai, Belgium
Timezone: GMT+5
Joined: 2013-02-04
Posts: 5
Points: 8

It works!

Great! I inserted the code you gave me and changed the pixel's and it works great now! Thanks a bunch guys! Really Helped! Party

But just a quick question: what would editing the
    margin: 0 auto;
do to the website? or else, thanks for everything.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 21 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

centering

The {margin: 0 auto;} applied to a container element causes the side margins to be equal, thus centering that element within its parent.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.