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

Home Forums Support Container only on first blog post and sidebar below blog posts

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1118827
    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; 
        }
    }
    
    #1119172
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    #1119394
    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:

    Without hooks

    Any idea what I should change?

    #1119920
    David
    Staff
    Customer Support

    Hi there,

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

    #1119951
    Mikke

    Hi,

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

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

    #1120021
    David
    Staff
    Customer Support

    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);
    }
    #1120438
    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!

    #1120715
    David
    Staff
    Customer Support

    Awesome – glad you got it resolved 🙂

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