Single blog post

Hi,

I have my blog settings set to full width but want to center align the content with some margin on the left and right so that it has the same feel as my other pages. Somehow I can’t get this done.

I have added the following code to my css without succes:

.blog.home #page article {
padding: 0 !important;
}

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

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

Can anyone help me?

Hello there,

I hope you are doing well today.

Could you please provide a link to your website so that I can inspect it?

Best Regards,
Support

Thank you so much for responding!

I don’t have it up on a site yet - just working on it locally at the moment. I attached a Zip file - the html file I’m working off of is index-test.html. There are several files in this .zip that came with the template - some I’m not even sure I need for when I do post onto a server?

I really appreciate any help you can give. I’ve been looking through the .css and .js files for hours looking for which area I need to enter my email so that the information sends after a user hits the “Submit” button.

Thank you!

Hi @sshaw

this is your second question, please see my previous answer

Hi,

Please note: I’m the topic starter (not the same person who posted the second question).

Here’s the link to the blog on my site: www.cr3ate.nl/mijnblog. In there you will find a sample blog post. When you click this post, you’ll see what I mean regarding the margins (compared to the layout of the rest of my site).

I’ve already added the following css code, but this doesn’t work as desired (e.g. no margins when viewing on mobile):

/*Blog*/
/*.entry-content*/
.post-title {
	/*margin-left: auto;
	margin-right: auto;
	max-width: 1140px;	*/
	display: none;
}

div[class=mijnblog] {
	margin-top: -40px;
	margin-left: auto;
	margin-right: auto;
	max-width: 1140px;
}

.shapely-next-prev {
	margin-left: auto;
	margin-right: auto;
	max-width: 1170px;
}

.shapely-tags {
	margin-left: auto;
	margin-right: auto;
	max-width: 1170px;
}

Thank you for your help.

Regards,

Sebastiaan

Hi Sebasting

Still need your help to better understand your question,
from what i understand we are talking about this page: https://www.cr3ate.nl/test-1/
now my question is, what you want to achieve here? forget about what you have added, just tell me what is your goal

Hi Noda,

Yes, I need help concerning the layout of my single blog posts. When you open them on a full screen browser on window the computer you’ll see that (due to my css addition as posted in my topic starter post) the text is nicely allined like on the rest of my site (margins left and right). But when you scale the size of the browser window, these settings aren’t taking into account and eventually you’ll notice that the text will have no margins. leaving the text on both left and right side touch the browser window and thus having no margin or what so ever.

Preferably I want to have the content of each single blog page center alligned on the screen (max. width 1170) with the right side bar on the right. But when I add the right side bar, allignment goes all wrong (full screen without any margins e.g. margin-left set to 30px and margin-right set to 30px).

Hope the above makes sense?

Kind regards,

HI

Well, you messed page with css changes :smiley:

add this css to change some margins on smaller screens:

@media (max-width: 991px){
.mijnblog {
margin-left: 20px;
margin-right: 20px;
}

}

or, alternatively you could use this update your css to this:

div[class=mijnblog] {
margin-left: 10%;
margin-right: 10%;
}