[Resolved] shadow header, blog/post padding

[Norman]

Hi team gp,

I was wondering if it possible to have a shadow below the header? I have static + sticky enabled, and when I’m at the top of the page, there is no separation between the header and page (https://www.fairfieldcollege.nl/blog). I’m not sure if there ever was a shadow/line, but if there was, I accidentally removed it.

Also, I’d like to change the padding of the blog page and of all the posts. Right now they are all full width. I’m sort of learning to use css, but for this one I really can’t seem to find the right element to address.

Thanks:)

EDIT: one more question, why does my site often load like this: http://imgur.com/a/NwYqE ?

[Leo]

Hi there,

– Try this CSS for shadow:

.main-navigation {
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

Use this site to fine tune it: http://www.cssmatic.com/box-shadow

– The blog page does have padding? This is what I see: https://s29.postimg.org/72bv90k87/2017-06-26_0759.png
Are you wanting different container width than the rest of the site?

– For site not loading correctly, can you try #1 on this page?
https://docs.generatepress.com/article/debugging-tips/

[Norman]

The .main-navigation doesn’t work..

And yeah, I’d like the blog page to be less wide. Around 800-900ish.

Thanks for the debugging tips, I will check them out:)

[Leo]

Hmm I’m not seeing the CSS being added.

Any caching plugin or maybe syntax errors in previous CSS?

This should work for blog container size:

.blog .site.grid-container {
    max-width: 900px;
}

[Norman]

I already removed the css! I’ll put it back now

[Norman]

it works now.. My bad. Thanks!

[Leo]

No problem!

[Norman]

Leo, one more question:

I tried to change the body background color using this css:

.body {
background-color: rgba(0,0,0,0.02) !important;
}

it doesn’t work though. I’m trying to make the blog white surrounded by grey.

Is the css wrong?

[Leo]

Try this:

.blog, .archive {
    background-color: rgba(0,0,0,0.02);
}

Make sure it’s added in the global CSS editor as WordPress ignores all metabox on index pages (blog, archive)

[Norman]

I’m sorry to keep on bothering. Somehow I broke my site. The layout is pretty messed up, desktop and mobile.

EDIT: I don’t know what happened. I disabled some css and now it’s okay.

I just wanted a rgba(0,0,0,0.2) body background

[Leo]

Everything looks fine to me?
https://s8.postimg.org/a3ljt18qd/2017-06-26_1145.png
https://s11.postimg.org/690il9byr/2017-06-26_1145_001.png

What are you seeing?

[Author]

Posts