- This topic has 7 replies, 4 voices, and was last updated 1 year, 1 month ago by
David.
-
AuthorPosts
-
December 1, 2019 at 5:19 am #1087663
John
Hello
I am using before_commenting_conatiner hook to show related posts. It works well.
I applied some CSS also to show the related post area full width. But it not works.
There are blank space in right side and hide some portion in left side.
How can I fix it?
Thanks
December 1, 2019 at 8:48 am #1088063Leo
StaffCustomer SupportHi there,
Can you try David’s HTML structure here?
https://generatepress.com/forums/topic/make-a-div-full-width/#post-1066586Let me know 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/December 1, 2019 at 9:01 am #1088088John
Here is my HTML structure
<div class="wpsp-related-posts grid-container"> <h2>Related Reviews</h2> <?php if ( is_single() ) { $cats = get_the_category(); $cat = $cats[0]; } else { $cat = get_category( get_query_var( 'cat' ) ); } $cat_slug = $cat->slug; $list = get_page_by_title( 'related', 'OBJECT', 'wp_show_posts' ); wpsp_display( $list->ID, 'tax_term="' . $cat_slug . '"' ); ?> </div>
Here is CSS
.wpsp-related-posts { background-color: #f2f3f4; padding: 64px; -webkit-box-sizing: border-box; box-sizing: border-box; } .wpsp-related-posts h2 { margin-bottom: 64px; } body { overflow-x: hidden; } .wpsp-related-posts.grid-container { margin-left : calc( -100vw / 2 + 100% / 2 ); margin-right : calc( -100vw / 2 + 100% / 2 ); max-width : 100vw; } .wpsp-related-posts h2, .wpsp-related-posts h4 { text-align: center; }
CSS code provided by Tom
December 1, 2019 at 7:38 pm #1088762Tom
Lead DeveloperLead DeveloperStrange – that CSS should work. What happens if you disable the sidebar (just to test)?
Ideally, it should be possible to unhook the comments area and re-add it after the container. This is something I need to address inside the theme.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentDecember 1, 2019 at 8:50 pm #1088825John
It works in full width container.
By the way, How can I narrow container width?
December 2, 2019 at 5:54 am #1089505David
StaffCustomer SupportHi there,
it would require an inner container to limit the inner width – so the markup will look like this:
<div class="wpsp-related-posts grid-container"> <div class="wpsp-related-inner"> <h2>Related Reviews</h2> <?php if ( is_single() ) { $cats = get_the_category(); $cat = $cats[0]; } else { $cat = get_category( get_query_var( 'cat' ) ); } $cat_slug = $cat->slug; $list = get_page_by_title( 'related', 'OBJECT', 'wp_show_posts' ); wpsp_display( $list->ID, 'tax_term="' . $cat_slug . '"' ); ?> </div> </div>
Then add this CSS:
.wpsp-related-inner { max-width: 1200px; margin-left: auto; margin-right: auto; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/December 2, 2019 at 8:12 am #1089920John
Oh!My bad
I tried to mean body container. Especially single post content.
How can I narrow post content(single post) like wordsmith, Volume?
December 2, 2019 at 8:50 am #1090000David
StaffCustomer SupportYou can use the Layout element to selectively adjust content width:
https://docs.generatepress.com/article/layout-element-overview/
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.