[Support request] Container only on first blog post and sidebar below blog posts

[Mikke]

Hi,
Recently started with GeneratePress Premium to build a SEO optimised and fast loading site. It’s really nice and I am soon finished with my tweaks for the UI.

Currently I have two problems:

1. Only my first blog post in the blog part have a container around it.

2. The sidebar somehow places itself below all blog posts instead of to the right that it should do. (It works on separate blog posts).

This is the Custom CSS I’ve added (thanks to Google searches and an awesome support forum!).

—-

.page-header-image.grid-container {
      max-width: 100%;
}

.page-header-image.grid-container img {
      width: 100%;
}

.full-container {  
	  border: 1px solid #ededed;
	box-shadow: 0px 0px 20px 2px rgba(0,0,0,0.15);

			
}
nav#sticky-navigation {
	box-shadow: 0px 0px 12px -2px rgba(0,0,0,0.75);
}

.button.ghost, .button.ghost:visited {     
    background: transparent;     
    border: 2px solid #007ebe;
		color: #007ebe;
		border-radius:10px;
} 
.button.ghost:hover, 
.button.ghost:active {     
    background: #007ebe;     
    color: white;    
    border: 2px solid #007ebe; 
}

.single .container.grid-container {
    max-width: 1200px;

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

}
@media (min-width:769px) {
    .main-navigation .main-nav ul li.nav-button a {
        background-color: #007ebe;
			margin-left: 25px;
        border: 1px solid #007ebe;
			color: white;
			border-radius: 10px;
        line-height: 35px; 
    }
}

[Tom]

Hi there,

Have you added a “full-container” element using Hooks? If so, what happens if you remove that hook?

[Mikke]

Hi,
If i remove those two hooks (Before container) and (After container) it kind of works. But then I don’t have my box around the content with my shadows around the container:

Any idea what I should change?

[David]

Hi there,

can you provide a screenshot of the effect you’re trying to achieve?

[Mikke]

Hi,

With hooks activated together with my CSS changes, works fine on all single pages. But Blog page with all blogposts is broken:

When I turn off my hooks it’s OK but then I don’t have my shadows around any containers anymore.

[David]

Why not just add the shadow to the .post class eg.

.post {
    border: 1px solid #ededed;
    box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.15);
}

[Mikke]

Thanks.

Together with:

.page {
    border: 1px solid #ededed;
    box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.15);
}

Then I have success. 🙂

Thanks!

[David]

Awesome – glad you got it resolved 🙂

[Author]

Posts