Pilcrow Theme: Problems with Content width and alignment

wolfgirlalice · Member · Jul 9, 2014 at 11:45 am
Copy link

Add topic to favorites
Hi, I’ve not had problems with Pilcrow before and I got the website exactly the way I wanted it. Then suddenly today I try to add a background image and the whole layout gets messed, so I was wondering if someone could help. I had everything, header image, menu and my two-column content set to 1030px so it was all aligned, but now my content has returned to a smaller width even though the CSS is still set to:

.two-column #container {
max-width: 1030px;
}

I need to get it back to 1030px to be aligned with my menu and header image.

On top of this, my whole website seems to have shifted right on the page (and I don’t know if this may be the reason for the other problem.) I need everything central again and would be very pleased for help. I’m not sure if there’s a bug in the Pilcrow theme or it just doesn’t like background images.

The blog I need help with is: (visible only to logged in users)
wolfgirlalice · Member · Jul 9, 2014 at 12:12 pm
Copy link
Update: I’ve given the page a background image to show that a static white background is running around the content. This happens to be central but I can’t get it to move left and widen so that at 1030px the whole content section is central on the screen.
wolfgirlalice · Member · Jul 9, 2014 at 12:30 pm
Copy link
Update 2: I’ve managed to get the text to spread, I just needed to change max-width to min-width. However, the whole page is still too far to the left. I do have padding in pace around the content but it’s set to 20px. If you’ll notice, the padding on the left side is more like 50px. I can’t seem to get rid of this extra padding – it’s as if the theme won’t allow content to stretch that far over. Help with this would be much appreciated!
wolfgirlalice · Member · Jul 9, 2014 at 12:31 pm
Copy link
Too far to the right*
thesacredpath · Member · Jul 9, 2014 at 5:52 pm
Copy link
To get the page centered, there are two parent elements that have a width setting less than your 1030px in .two-column #container. Add the following CSS to correct that. I also set the left and right margin in #wrapper #container to auto so they stay equal.
```
#wrapper {
    min-width: 1070px;
}
#wrapper #container {
    margin-left: auto;
    margin-right: auto;
}
```
wolfgirlalice · Member · Jul 9, 2014 at 5:56 pm
Copy link
Ah thank you very much! It works perfectly now :)
thesacredpath · Member · Jul 9, 2014 at 8:59 pm
Copy link
You are welcome.

No items found.