Centering content in full width view for Sparkling theme

Hi

Thanks for great theme.

I want to know how to center the post content in full width mode. I have full width on post pages and i want to have a custom width of them. I did something like that:

.single #secondary {
    display: none;
}

.single .main-content-inner.col-sm-12.col-md-8.pull-left {
    width: 90%;
} 

I changed the width to 90%, but it is not working well for me, because i want to have this content centered, now its more on the left side.

I dont want to change the width on the front page with sidebar, i want to change it only for post page which is set to full width.

Here is the link to my single post page:

http://nowaepoka.pl/jeden-wieczor/

Remove this part of custom CSS that you have added and also mentioned on your thread:

.single .main-content-inner.col-sm-12.col-md-8.pull-left {
    width: 90%;
} 

And replace it with this one instead:

.single .main-content-area {
  width: 100%;
}
.single #content {
  float: none !important;
  margin-left: auto;
  margin-right: auto;
}

This code will make sure that your content area will be centered, full width and won’t have sidebar.

Let me know if this is what you were looking for.

It works great, thanks a lot! :slight_smile:

Is there any solution to make post titles centered also on a post page, and to leave them on the left side im excrept on front page?

You can center Post title only in Single Post view by adding this simple code to Theme Options - Other - Custom CSS.

.single .entry-title {
  text-align: center;
}

Let me know if this helps.

One problem I get after doing my post page 80% width with your first code my featured images are larger and not shown fully. How can I fix this?

More problems now.

After theme update this code

.single .main-content-area { width: 100%; } .single #content { float: none !important; margin-left: auto; margin-right: auto; }

Is not working, my text is not centered now. It all crashed after theme update i did today

http://nowaepoka.pl/jeden-wieczor/

Then you are trying to add full-width (1170px wide) post or keep the regular size post (750px wide) but just make it centered?

In fact, it is something between those two sizes that you mentioned. I want it about 70 or 80% of full width and centered.

Ok, now i get it.

Remove all Custom CSS that you tried to add yourself and leave only one that you have taken from this forum.
By that I mean margin-right: -400px; and other crazy things.

Once you are done with that, please notify me and I will help you to align your website properly.

Ok , its done.

Add this code to Custom CSS field:

.single .main-content-inner.col-sm-12.col-md-8.pull-left {
  float: none !important;
  margin: auto;
  width: 100%;
  max-width: 800px;
}

.single .main-content-area {
  width: 100%;
}

And remove this part:

.single .main-content-area {
  width: 70%;
}
.single #content {
  float: none !important;
  margin-left:  auto;
  margin-right: auto;
}

Let me know if this helps

Everything works fine now :slight_smile:

Colorlib has the best support Ive ever seen. Thank you so much for your help and patience.

Thank you for your feedback! I really appreciate it! :slight_smile:

Quick question here…I just added this code to my site:

.single .main-content-inner.col-sm-12.col-md-8.pull-left {
  float: none !important;
  margin: auto;
  width: 100%;
  max-width: 800px;
}

.single .main-content-area {
  width: 100%;
}

This works great on the blog content pages, but how can I apply to all pages across the site?

@mbernstein

You just have to slightly modify CSS selector and these changes will apply on all pages and not just single posts. You can do it like this:

.main-content-inner.col-sm-12.col-md-8.pull-left {
  float: none !important;
  margin: auto;
  width: 100%;
  max-width: 800px;
}

.main-content-area {
  width: 100%;
}

Let me know if this helps.

Ah, I had an error in my code. Thanks for the help!