How to give post margins?

Posted in: Newspaper
Post count: 114

Hello! I would like for my full-screen (no sidebar) posts to have margins on a desktop, so that the text appears in the middle 2/3rds of the computer screen as in this article: https://www.gq.com/story/stephen-colbert-gq-cover-story. How can I do this? Thanks so much!

Post count: 35449

Hi,

You can set the post content without sidebars for individual posts, you need to go in Post settings and set position sidebar -> https://www.screencast.com/t/qDzqObaj7AlY .

Thank you!

Post count: 114

Yes, I know how to do that…but this is what I am asking for: When the post content is without sidebars, it fills the entire screen. Instead, I want it to be 2/3rds of the screen, only on desktops. In other words, I want more of a margin on the left and right, only on desktop screens. Please reference the link that I provided. Would you please provide the custom code to do this? Thanks.

Post count: 35449

Hi,

You can set on the row margin-left and right auto and a specific width like this -> https://www.screencast.com/t/cSjvU42XkcZ

Hope this will help you better!
Thank you!

Post count: 114

I believe this link describes how to change the margin for a page? I need it to change the margin for the posts, and only on desktops. I believe this custom code would be entered under Custom Code > Advanced > Desktops. Would you please provide the custom code to do this? Thanks.

Post count: 35449

Hi,

If you want to change the margins for a post you can use a single post template from tagDiv Cloud Library edit the single post template -> https://www.screencast.com/t/pnHNvnEeVi
If you do not want to use the above method you can try a custom css -> https://www.screencast.com/t/3NDntyONe55K
.single .td-container-wrap .td-container .td-pb-row{
width: 80%;
margin-left: auto;
margin-right: auto;
}

Set the code in theme panel> Custom code> Advance css> Desktop

Thank you!

Post count: 114

Thank you for providing the css…but it doesn’t work. I copied and pasted it in the Theme Panel>Custom Code>Advance CSS>Desktop, as you directed. Nothing happens. The rest of the site remains the same. Would you please double-check the code, or provide another css that might work? Thanks

Post count: 3

Thanks for posting this. I am also looking for this solution – blog posts without sidebars is far too wide. Hope a solution turns up!

Post count: 35449

Hi,

Please check this video -> https://www.screencast.com/t/kU4QrgpASD4a
Hope this will help you better!

Thank you!

Post count: 114

Thanks for this video, Calin, but I would rather do this through the Custom CSS panel. Would you please double-check that css code that you provided, or provide a new css that would work? Thanks so much.

Post count: 35449

Hi,

Using css is not the beast idea, because if the css is not set proper for all post is possible that some of theme not be display properly.
If you still want to try the css please provide me a link to a post were I can check the elements to provide you an working css for that post.

Thank you!

Post count: 114

Yes, I would still like to try the css. Here is the link to the post: http://athousanddifferentcolors.com/art-music-saved-me/ Thanks so much for your help!

Post count: 35449

Hi,

Please try this custom css, and check if the webiste is look well
-> https://www.screencast.com/t/I9RXzRI3mW3h
.td-boxed-layout #td-outer-wrap{
width: 960px!important;
}
.single .td-container {
width: 90%;
}

Also you can change the width size if you want.

Thank you!

Post count: 114

Hi, Colin. Sorry, but this css does not work. It makes the whole site, including the homepage, only 960 px wide. I also tried using the second half of the css, and it shifted the entire post to the right, including the feature image, while leaving the header at full width. For this to look correct, the feature image needs to stay the same, and only the text body needs to have margins so that it appears at 80%. Thanks for your help!

Post count: 35449

Hi,

Sorry, but using css is not easy to achieve what you need, maybe you can try to use the single post template from tagDiv Cloud Library.

Thank you!

Viewing 15 posts - 1 through 15 (of 15 total)
You must be logged in to reply to this topic.