Archived topic

Padding for pages and posts

15 replies · Started by Radu on March 11, 2018

Viewing posts 1–15 of 16

March 11, 2018 at 2:32 am #516844

Hi Tom,

I am trying to achieve the following:
Build a website with landing pages (wordpress pages) and blog section (wordpress posts). I would like to get rid of the sidebar on pages (keep sidebar on articles and blog section only) and use full content. However, the text/paragraphs are too long for easy reading, so I use "content padding" option to increase text margins on the body of pages. However, the "content padding" option affects both pages and posts.

What's your recommendation for best achieving this? Should I use custom css on each page for increasing text margins?

Do you think it would be a good idea to add to GP Customizer the option of editing text margin separately for pages and posts?

I could use Elementor for editing each page, but I am trying to keep things as simple as possible.

Thanks,
Radu

March 11, 2018 at 8:45 am #517046

Hi there,

So what are the problems you are running into?

Just the content padding?

Can you link me to what you have so far?

You can edit the original topic and use the private URL field.

Let me know :)

March 11, 2018 at 9:44 am #517120

Hi LEO,

I want different values for text padding in pages and posts.
x padding in pages and y padding in posts and blog page.
In customizer, editing text padding affects everything (posts, pages etc.)

Thanks,
Radu

March 11, 2018 at 5:44 pm #517377

We don't actually have text padding option in the customizer.

Are you referring to line height?

Let me know :)

March 11, 2018 at 5:48 pm #517379

Personalize - Arangement - Container - Content padding

March 11, 2018 at 8:28 pm #517444

Set the content padding to what you want in the blog and posts within the Customizer.

Then add this CSS:

.page.separate-containers .inside-article,
.page.one-container .site-content {
    padding: 30px;
}

March 14, 2018 at 6:06 am #519582

Thanks Tom. That is what I was looking for.
And for setting the padding on mobile devices?

Thank you!
Radu

March 14, 2018 at 7:21 am #519630

It would be something like this:

@media (max-width: 768px) {
    .page.separate-containers .inside-article,
    .page.one-container .site-content {
        padding: 30px;
    }
}

More info here if you are interested: https://docs.generatepress.com/article/responsive-display/

March 14, 2018 at 7:58 am #519725

Perfect! Thanks!!

March 14, 2018 at 10:09 am #519893

No problem!

April 1, 2019 at 8:30 pm #856426

I need it the other way around. Padding only for Post pages.

Thanks

Edwin

April 1, 2019 at 9:16 pm #856435

Try this:

@media (max-width: 768px) {
    .blog.separate-containers .inside-article {
        padding: 30px;
    }
}

If this doesn't work, please open a new topic and link us to the site in question.

Thanks!

August 20, 2021 at 5:11 am #1902359

Hi Leo, sorry for re-opening, but I would like to have different padding ONLY on latest posts page.

If I use this:

.page.separate-containers .inside-article,
.page.one-container .site-content {
  padding-top: 30px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 40px
}

This solves the pages, but comments and single articles/posts are still with the Customizer/Container setting (10, 10, 0, 10).

Thanks!

August 20, 2021 at 8:25 am #1902748

Hi there,

can you share a link to your site? ( Resolved topic automatically remove any private information )

August 20, 2021 at 8:30 am #1902754

Hi David, here you go.

Thanks

This archived topic is closed to new replies.

Start building better websites today.