[Resolved] Equal height content and sidebar

Home Forums Support [Resolved] Equal height content and sidebar

Home Forums Support Equal height content and sidebar

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #696268
    Jeffrey

    Good afternoon,

    I would like to make my sidebar the same height as the content is.

    View post on imgur.com

    Does anybody know how to do this?

    Thank you very much.

    Best regards,

    Jeffrey

    GP Premium 1.7.2
    #696320
    Leo
    Staff
    Customer Support

    Hi there,

    Is there a specific page I should be looking at?

    The sidebar on the homepage is longer than the content:
    https://www.screencast.com/t/KKeVnbhR

    Let me know 🙂

    #696824
    Jeffrey

    Hi Leo,

    No specific page. I just want the content and sidebar to be the same height no matter the content being longer or the sidebar.

    I hope you can help me with that.

    Thank you.

    #696963
    David
    Staff
    Customer Support

    Hi there,

    give this CSS a shot:

    @media (min-width: 769px) {
    	.site-content {
    		display: -webkit-box;
    		display: -ms-flexbox;
    		display: flex;
    		-ms-flex-wrap: wrap;
    		    flex-wrap: wrap;
    	}
    	.homehero, .homehero2 {
    		-webkit-box-flex: 1;
    		    -ms-flex: 1 0 100%;
    		        flex: 1 0 100%;
    		-webkit-box-sizing: border-box;
    		        box-sizing: border-box;
    	}
    	#right-sidebar {
    		background-color: #fff;
    	}
    }

    Just need to be mindful of elements being hooked into the content, like the homeheros will be effected by the flex. You may want to look at using the Element Header or a before_content hook for those elements.

    #697001
    Jeffrey

    Hi David,

    Thank you very much for helping. Your solution is working and i’ve put the heros inside a after_header hook now.

    Great support! thanks.

    #697003
    David
    Staff
    Customer Support

    Thats great you can remove this CSS:

    .homehero, .homehero2 {
    		-webkit-box-flex: 1;
    		    -ms-flex: 1 0 100%;
    		        flex: 1 0 100%;
    		-webkit-box-sizing: border-box;
    		        box-sizing: border-box;
    	}
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.