Padding in pages and frontpage

Shapely
1

Hi Movin:)

With your help I have solved a lot of problems on my site but one still remains.
I want to change the padding on pages and for that you have given me this following code:

body.page section.content-area {
    padding-top: 85px;
}

This code does change the padding but what it also does is to create a huge white band on the front page. I have attached a screenshot of that.

Is there a way to exclude the frontpage from this code? or is there another code that only works on pages other than the front page?

And last my question: this code doesn’t seem to affect the blog section, what would I have to do to change the padding there?

This is my site, if it’s relevant. I have set the padding to 0px and added small white images to every page to control the padding manually
http://www.utkusarioglu.com/images/

Thank you very much for your help

2

Hi @utkusarioglu,

I hope you are well today and thank you for your questions.

Is there a way to exclude the frontpage from this code? or is there another code that only works on pages other than the front page?

You can use the below CSS code to remove the padding from front page.

body.home.page section.content-area {
    padding-top: 0;
}
And last my question: this code doesn’t seem to affect the blog section, what would I have to do to change the padding there?

Could you please share me the page URL from your site where it’s not working so that i can troubleshoot it?

Best Regards,
Movin

3

Thank you for answering. The padding code worked perfectly:)

For the blog thing, I don’t know if it’s relevant for the fix but I still haven’t migrated my blogs to the site. All the content there is whatever came with Shapely and WordPress. Here is the link:

http://www.utkusarioglu.com/blog/

Also I should mention that I will have 2 separate blogs on this site. I know you want to keep the threads clean so I will ask about that in a separate post. But I wanted to note my plans in case me adding more blogs to the site changes anything for the fix.

Thank you

4

You are most welcome here :slight_smile:

You said initially that you wanted to implement it on the pages so i developed the CSS code accordingly. The blog page is not general page but archive page so the code is not working on it.

To make the code work on every site web pages please use the below CSS code instead of the code shared above.

#main section.content-area {
    padding-top: 85px;
}

body.home #main section.content-area {
    padding-top: 0;
}
5

Hey Movin,

The code you gave didn’t work at all. Theme ignored it and returned to its default padding settings. I tried different ways of attacking it, the best method I came up with was this:

body.single section.content-area,
body.blog section.content-area,
body.page section.content-area,
body.search section.content-area,
body.content section.content-area {
    padding-top: 30px;
}

I’m not even sure some of those sections mean anything and It looks like I left some sections out because this code didn’t work everywhere. Anyway I seem to have found the fix I needed to make to end all my padding issues at once.

In style.css there is this section:

/*!---------- 5. SECTIONS ----------*/

section, footer {
  padding: 30px 0;
  position: relative;
  overflow: hidden;
}

It seems like that padding: 30px control all sections except the front page. So I guess this issue is resolved. I wanted to explain all of this here so that anyone else who wants to do the same can find that section change the padding as they like.

And also thank you for all your help to me and to everyone else on this site

6

Oh there is one more padding that is set to 80px setting a bit below the one I mentioned in the previous post. that one controls the padding in pages when the page width is lower than some certain value. 767px if I’m not wrong. Anyone who wants to change their padding settings should also pay attention to that number.

7

The shared CSS code is working fine for me on your site by adding it in the browser inspector.

Awesome great to see you got that achieved.

Please advise if you have more questions.

Have a fantastic day!