Change/align content area (first page & posts)

Resolved Carla Maio
(@carlamaio)

13 years, 2 months ago

Hello!

I´m using the spun theme on my site and I’m trying to do some small changes like using only 3 circles per row ,etc. For that I have read the topics that already have being posted here but now I have a problem with which I have struggled for some time now 🙁 Can anyone help me?

1. I have changed my width page for 700px but now is not centered 🙁

2. I want my posts to assumed the same width, but the text inside does not fit that.

This is my site http://www.cmdesign.com.pt and this is the code that I tried to use:

#page {
background: #fff;
margin: 0 auto;
padding: 0 50px;
width: 700px;
}

.single #primary,
.page #primary,
.search-no-results #primary,
.error404 #primary {
clear: both;
margin: 0 auto;
width: 700px;
}

#masthead {
opacity: 1;
width: 700px;
}

#primary .content-area {
width: 700px;
}

Thanks*

Viewing 13 replies - 1 through 13 (of 13 total)

Theme Author Caroline Moore
(@sixhours)

13 years, 2 months ago
That’s because the circles are floated to the left, into rows. To center them, you’d either need to resize the content column to match their collective width (plus margins and padding), or resize the circles to expand to the new width.

And this selector:
```
.single .hentry,
.error404 .hentry,
.page .hentry,
.search-no-results .no-results
```
… has extra padding applied to it, so you’d need to account for that when setting the width for the post content. Subtract the padding from your desired width to get the content to fit into the space.
Thread Starter Carla Maio
(@carlamaio)

13 years, 2 months ago

Thanks for responding Caroline and congratulations for the great theme.

I’m sorry but I don’t understand.. (I’m kinda beginner on it)

I’ve already deleted the selector that you mentioned from my CSS child theme …(nothing happens).. but you said that I also need to change the padding and margins, in order to resize the content column, right? But how I do that..? How can I find the code in the style.css? And should I let the codes that I already put, like: #main ; #page; #masthead; #primary .content-area ?

Thanks!

Theme Author Caroline Moore
(@sixhours)

13 years, 2 months ago

You can use a browser addon like Firebug to right-click or Ctrl+click and “Inspect” your site to find the content column and view its properties. Then find the same selector(s) in style.css, copy it to your child theme, and change whatever you want to change.

You would want to add the selector I posted above to your child theme, then set a new width on it, accounting for the padding around the content, which appears to be 50px on the left and right sides. So whatever new width you want, minus 100px.

I don’t offer CSS customization support, but you can find a number of helpful resources to get you started here. Good luck!

Thread Starter Carla Maio
(@carlamaio)

13 years, 2 months ago

After many attempts I think I could solve this 🙂 Thank You! *

Theme Author Caroline Moore
(@sixhours)

13 years, 2 months ago

Yay! Glad you’ve figured it out. If you have a code solution to share, others may be interested in doing the same or similar — feel free to post it here.

Thread Starter Carla Maio
(@carlamaio)

13 years, 2 months ago

Hi! The code that I used (sorry not to have placed before) was that:

#page {
margin: 0 auto;
padding: 0 50px;
width: 700px;
}

#primary.content-area {
margin: 0 auto;
padding: 100px 50px;
width: 700px;
}

.single .hentry,
.error404 .hentry,
.page .hentry,
.search-no-results .no-results {
margin: 0 auto;
padding: 90px 10px;
padding-top: -130px;
margin-top: -130px;
width: 600px;
height: auto;
}

Actually it was a question of trying to change the padding and see if it works. Worked with me, despite now being with some huge top margins and not be able to change it … 🙁 … by the way, suggestions are accepted!

Theme Author Caroline Moore
(@sixhours)

13 years, 2 months ago

Thanks!

I’ll note, padding cannot be negative, only margins. You can remove the padding-top: -130px; value without it affecting the display of the layout.

Thread Starter Carla Maio
(@carlamaio)

13 years, 2 months ago

Ups… 🙂 I didn’t know that! Thanks a lot!

Sorry bordering with that but can you just tell how can i move my circles just up a little? I have tried everything already with no succeed….

Theme Author Caroline Moore
(@sixhours)

13 years, 2 months ago

It looks like you’ve already figured it out, but you could set a negative top margin on #main, #primary, or any of the content wrappers around the circles.

Thread Starter Carla Maio
(@carlamaio)

13 years, 2 months ago

No I didn’t.. I just gave up!.. (because I nedd to move on) And try to had more post so it look different than before.

But I’ll try what you advised me. Thank you once again!

Anonymous User 13434028
(@anonymized-13434028)

12 years, 6 months ago

hello sorry to bump this old thread but i tried the code above but it doesn’t center and also it makes 2 circles in a row when i want 3, im i doing something wrong or is this code out dated?

WPyogi
(@wpyogi)

12 years, 6 months ago

@reddbonetv – please instead start your own thread and include a link to your site.

Anonymous User 13434028
(@anonymized-13434028)

12 years, 6 months ago

will do sorry bout that.

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘Change/align content area (first page & posts)’ is closed to new replies.