Help with page template/no footer widgets with sidebar?

(@lazyym)

I’m attempting to build a page template that leaves the sidebar but removes the footer widgets. This pushes the sidebar down below the content. Any suggestions?

<?php

/**

 * Template Name: No Footer Widgets

 *

 * @subpackage Twenty_Sixteen child theme

 */

get_header(); ?>

<div id="main-full" class="main-full">

	<main id="main-full" class="site-main-full" role="main-full">

		<?php

		// Start the loop.

		while ( have_posts() ) : the_post();

			// Include the page content template.

			get_template_part( 'template-parts/content', 'page' );

			// If comments are open or we have at least one comment, load up the comment template.

			if ( comments_open() || get_comments_number() ) {

				comments_template();

			}

			// End of the loop.

		endwhile;

		?>

	<?php //get_sidebar( 'content-bottom' ); ?>

</div><!-- .content-area -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Viewing 8 replies - 1 through 8 (of 8 total)

stephencottontail
(@stephencottontail)

8 years, 1 month ago
Because of this code (lines 3059-3063 of the main stylesheet):
```
.content-area {
  float: left;
  margin-right: -100%;
  width: 70%;
}
```
you need to keep the “content-area” class in your page template or there won’t be any “room” for the sidebar. It probably should be:

<div id="main-full" class="main-full content-area">
Thread Starter lazyym
(@lazyym)

8 years, 1 month ago
Thanks stephencottontail,

This
```
<div id="main-nofooterwidgets" class="main-nofooterwidgets content-area-nofooter">

<main id="main-nofooterwidgets" class="site-main-nofooterwidgets" role="main-nofooterwidgets">
```
With this css in my child theme gets me closer
```
.content-area-nofooter{float: left;margin-right: -100%;width: 70%;}
#main-nofooterwidgets{width:100%;}
```
It allows the sidebar but now my content area floats underneath the sidebar.
stephencottontail
(@stephencottontail)

8 years, 1 month ago

You can’t have two HTML elements on the same page that have the same ID. If you remove id="main-nofooterwidgets" from <div>, it’ll work correctly:

<div class="main-nofooterwidgets content-area-nofooter">

Thread Starter lazyym
(@lazyym)

8 years, 1 month ago

Forgive my ignorance and thanks for your patience. I really appreciate this help. Wrapping my head around this is taking more than I imagined.

This solves a problem. Now the next challenge is the 70% width, I think. I notice now on mobile that it squeezes them to 70%. When I expand it, it does what its supposed to do but puts it back under the sidebar.
stephencottontail
(@stephencottontail)

8 years, 1 month ago
The code I originally posted was wrapped in a media query so that it would only be applied when the browser was wider than 910 pixels. If you were going to create a new class instead of just using content-area like I originally suggested, you need to wrap the new class in a media query as well:
```
@media screen and (min-width: 56.875em) {
	.content-area-nofooter{float: left;margin-right: -100%;width: 70%;}
	#main-nofooterwidgets{width:100%;}
}
```
Thread Starter lazyym
(@lazyym)

8 years, 1 month ago

Thanks again sir.

I have it in this page as an example. I plugged that new css in there and it sill doesn’t like mobile: http://montanaguntrader.com/privacy/

I guess I need it more like I’m five.
stephencottontail
(@stephencottontail)

8 years, 1 month ago
The page you linked looks exactly the same as the parent theme on mobile. Are you trying to make the content area take up the entire window on mobile? If so, try this:
```
@media screen and (max-width: 56.813em) {
	.content-area-nofooter{float: left;margin-right: -100%;width: 100%;}
}
```
Thread Starter lazyym
(@lazyym)

8 years, 1 month ago

That was it. You’re a life saver! I take back everything I said about Coloradans! For now…. 🙂

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Help with page template/no footer widgets with sidebar?’ is closed to new replies.