Page Width

hi moessap,

Use Firefox and then actiate Firebug to inspect your site. It’s really a great way to see what piece of code influences whta part of the site. Normally the width etc are in the style.css file.
Not in the home.php or page.php or single.php

What do you mean by the page? Do you mean the page or the posts? Do you mean the content, the posts, or the entire page including the sidebar? Each can have it’s own style.

The way I have it set up, I have the .wrapper enclose all, so it is the entire width of the page, then I have a content and a sidebar div inside of the wrapper div, each of which I can scale/style accordingly.

try temporarily adding a border or background color to your divs. That really helps me visualize what I am working with.

ex:

.wrapper {
width: 960px;
margin: 0px auto;
border: 1px solid pink;
}

or

background-color: lightgray;

Thanks henkholland… I’ll check that out :).

mrwolfy… I mean the entire area that any content would be posted on. I have a blank margin on the left, then then area where content is posted, then a sidebar, then another blank margin. Sorry does that makes any sense?

I think what you just said is a little beyond me… but I’ll fiddle around with it and see what I can figure out… thanks :).

mr Wolfy means to use / change your style.css to with border colors for easy identification. Good plan.

But hé, that’s just what Firebug can do for you. It’s free and it points out on your website what piece of css is ruling there.

Thank you… I tried both… both great suggestions and both work really well.

In Firebug I saw which piece of code was attached to which part of the site by the highlight function, but I got nothing when I went to the left or right margins.

I also couldn’t find anything by changing background colours… nothing ever shows up in the margins. I think rather than increasing the page width I need to decrease the margins.

Any other ideas?

Thanks again… I appreciate it.

cool, thanks, I will try firebug too.

@ moessap. The css can get really confusing. once you have visualized it though it’s much easier. What I suggest is that you identify all of the divs in your template (ex: index.php), then use either technique to visualize, the start moving them around using css. Will take some time, took me some time to get it. I’m kind of a beginner too, just scanning the forums for answers myself.

I think a margin is an invisible border/white space between elements, so it should show up as just space between one element, like your content div, and the edge of the browser window, for instance. I don’t think it will help with the width.

Good luck.

@moessap: the background color of your page (screen) outside of the visible content is controled by the body statement in your style.css.
Add background color there: (#000000 = black!)

body {
background:#000000;
}

More about CSS here: https://www.w3schools.com/

The margin clears an area around an element (outside the border).

The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.

BTW: by double clicking in the css display in Firebug at the right you can insert statements that affect the display in Firefox (only you cannot save from there).

Alright… thanks again you too.

This is all a little beyond me, but I’ll experiment and hopefully figure it out eventually.

Appreciate all the help :).