Center Pages in Sela Theme

breecrowder · Member · Jan 2, 2016 at 7:11 pm
Copy link

Add topic to favorites
On my about page (as an example), you can see the content is not centered.

Does anyone have CSS that will center this page?

The blog I need help with is: (visible only to logged in users)
breecrowder · Member · Jan 2, 2016 at 8:24 pm
Copy link
I’m also looking to center the comment box on the page.
g471n · Member · Jan 3, 2016 at 4:13 am
Copy link
Hi Bree

In the .content-area section of your custom CSS, try changing the width from 80% to 95% or even 100% like this:
```
.content-area {
    float: none;
    margin-left: auto;
    margin-right: auto;
    width: 95% !important;
}
```
breecrowder · Member · Jan 3, 2016 at 3:20 pm
Copy link
See, when using the content-area CSS, it changes both the main blog feed size and pages size, but they both look different. See here and here for reference.
breecrowder · Member · Jan 3, 2016 at 6:08 pm
Copy link
Sorry, the look of that is really bothering me, so I’ve switched back.

When I use the content-area coding with 100%, this is what each of those pages looks like. The main page is too wide, and the about page is just right.

g471n · Member · Jan 3, 2016 at 6:17 pm

OK … let’s try this.

.content-area {
    float: none;
    margin-left: 13% !important;
    margin-right: 13% !important;
    width: 80% !important;
}

breecrowder · Member · Jan 3, 2016 at 6:35 pm
Copy link
With that coding, main blog is just a little off centre. I’ll leave active for your reference.
breecrowder · Member · Jan 3, 2016 at 6:38 pm
Copy link
Is there any way to define this code for two separate areas?
breecrowder · Member · Jan 3, 2016 at 6:48 pm
Copy link
Okay, I figured out the centering issue. However, the About page is still very narrow. Any idea why this is?
g471n · Member · Jan 3, 2016 at 6:57 pm
Copy link
There seems to be a very wide margin on the left. Try this.
```
.content-wrapper.with-featured-image {
    margin: 0px;
}
```
breecrowder · Member · Jan 3, 2016 at 7:03 pm
Copy link
Still not working, unfortunately. :(
g471n · Member · Jan 3, 2016 at 7:23 pm
Copy link
I think this should do it :)
```
.content-wrapper.with-featured-image {
    margin: 0px !important;
}
```
breecrowder · Member · Jan 3, 2016 at 7:33 pm
Copy link
That does center the page, but now the text doesn’t ride up slightly on the image, which in this page template, it should.
breecrowder · Member · Jan 3, 2016 at 10:33 pm
Copy link
For some reason, since adding this CSS, the page templates are now different as well. Now they list as:

Default
Eventbrite Events
Page Plein Ecran
Page Quadrille
Page d’Accueil
g471n · Member · Jan 4, 2016 at 6:23 am
Copy link
I’m not sure about the page templates. I don’t think that is caused by the CSS.

Try this to get the text to ride up a bit.
```
.content-wrapper.with-featured-image {
    margin: 0px !important;
}
```

g471n · Member · Jan 4, 2016 at 6:24 am

Sorry, make that:

.content-wrapper.with-featured-image {
    margin-left: 4%!important;
}

breecrowder · Member · Jan 4, 2016 at 1:58 pm
Copy link
Ah, here’s my original issue. That CSS did work to move the text up, but you’ll see the white runs off the right side of the image. Even if I get rid of all of my existing CSS and just keep the code above, this white space still appears.

Sorry to keep on with the questions, but do you know why this would be happening?

g471n · Member · Jan 4, 2016 at 3:48 pm

We need to make the area a little narrower.

.content-wrapper.with-featured-image {
    margin-left: 4% !important;
    width: 84% !important;
}

breecrowder · Member · Jan 4, 2016 at 3:50 pm
Copy link
Thank you!! Worked so well!

Any chance you know how to reduce the white space between the text and the edges of the post? :)
breecrowder · Member · Jan 4, 2016 at 3:52 pm
Copy link
Aiming for something like this.

The topic ‘Center Pages in Sela Theme’ is closed to new replies.

Center Pages in Sela Theme

Couldn't find what you needed?

Contact us

Browse our guides

Mobile Apps

Social Media