Content Gap After Adding Sidebar – Twenty twenty Theme

  • Resolved userauser

    (@userauser)


    4 years, 6 months ago

    Wordpress Theme Twenty Twenty
    Latest Versions.

    Image: https://ibb.co/zbvLwDR .

    I’ve added a sidebar in child theme using

    <div class="side-bar-wrapper"><!-- .side-bar-warpper -->

	<?php get_sidebar( 'primary' ); ?>

</div><!-- .side-bar-warpper -->

    The code is in the content.php file in this position :

    <article <?php post_class(); ?> id="post-<?php the_ID(); ?>">

	<?php

	get_template_part( 'template-parts/entry-header' );
	

	if ( ! is_search() ) {
		get_template_part( 'template-parts/featured-image' );
	}

	?>
	<div class="side-bar-wrapper"><!-- .side-bar-warpper -->

		<?php get_sidebar( 'primary' ); ?>

	</div><!-- .side-bar-warpper -->
	
	<div class="post-inner <?php echo is_page_template( 'templates/template-full-width.php' ) ? '' : 'thin'; ?> ">

		<div class="entry-content">

			<?php

    I’ve tried adding the code to different theme parts but still there’s a gap in content when there is an image or a wide block.

    Tried changing the theme to full-width using CSS, still the sane.

    Thanks in advance.

    The page I need help with: [log in to see the link]

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

  • Hey userauser,

    You can use CSS floats to fix this issue. Could you please add this CSS code to your child theme’s “style-rtl.css” file:

    /* Fix sidebar alignment */
.post-inner.thin {
	float: right;
}

    That should fix the gap problem.



    Please let me know if you need any further help!

    Thread Starter userauser

    (@userauser)

    Hey Nial Madhoo,

    Thank you very much! It Worked!
    Another thing, on my phone when pressing the sumbmenu it getting overlapping.
    https://ibb.co/vXpWJSp

    On desktop the submenu is causing a horizontal-scrollbar.
    https://ibb.co/ySYXT2g

    Thanks again.

    • This reply was modified 4 years, 6 months ago by userauser.
    Thread Starter userauser

    (@userauser)

    update: It worked but it still there on laptops with screen sizes from 880 to 930px wide.
    Tried setting media with this parameters float left but still ain’t working.
    Thanks.

    Moderator bcworkz

    (@bcworkz)

    The horizontal scroll bar is because the sub-sub-menu box is placed way off screen to hide it. There’s a left rule in style-rtl.css that appears to be unnecessary that’s doing the placement. Try adding this to Additional CSS panel of the customizer:

    .primary-menu ul {
    left: auto;
}

    Verify the rest of the menu still works as expected. I only verified that it suppresses the scroll bar.

    The mobile menu items are not stacking like you’ve illustrated when checked in my browser’s mobile emulator. Either you’ve resolved it or the emulator isn’t accurately emulating.

    You’re welcome!

    The submenus are working perfectly on my mobile devices.

    However, I also get the horizontal scrollbar on desktop. It’s caused by the submenu being off canvas at left: 9999rem; before the mouse hovers over the parent menu item (the one above the dropdown):



    This code switches the submenu to display: block and visibility: visible. As the other submenus are also affected by this code, they display at left: 9999rem;, which is why the scrollbars appear.

    You need to set up the menus using CSS so that they appear as they do in the Twenty Twenty parent theme. Something in the child theme CSS has altered the way the submenus function, as bcworkz mentioned.

    Hope this helps!

    Thread Starter userauser

    (@userauser)

    Thanks for Both answers.

    I’ve deleted the left:9999 but scrollbar still appear.
    The bigger problem is that the gap is still happening from resolution of 880px width till 914px and from 1280px till 1635px.
    page for reference :https://thecityrenovators.com/;
    Thanks in advance.

    • This reply was modified 4 years, 6 months ago by userauser.
    • This reply was modified 4 years, 6 months ago by userauser.
    Thread Starter userauser

    (@userauser)

    @nm1com

    The code above is partly working because it only works on few pages as this: https://thecityrenovators.com/%d7%a6%d7%95-3-%d7%9e%d7%91%d7%a0%d7%94-%d7%9e%d7%a1%d7%95%d7%9b%d7%9f/

    Page that it doesn’t work: https://thecityrenovators.com.
    I’ve added this code too:

    post-inner{
	margin-right:4em ;
	}

    But it works only on one page.

    Thanks.

    @userauser I suggest you set up a container with a set width for the content below your header. That will make it easier to align the rest of the content, such as the sidebar. The issue is that the content can take up the entire viewport because there’s nothing to stop that from happening.

    I did this and it seems to work on desktop sizes (I only tested it on https://thecityrenovators.com/ and https://thecityrenovators.com/%d7%a6%d7%95-3-%d7%9e%d7%91%d7%a0%d7%94-%d7%9e%d7%a1%d7%95%d7%9b%d7%9f/):

    ADD:
#site-content {
	max-width: 1140px;
	margin: 0 auto;
}

.side-bar-wrapper {
    float: right;
    width: 30%;
}

.post-inner {
    float: left;
    width: 70%;
}

REMOVE: 

#sidebar-primary {
    width: 22vw;
    top: 0;
    right: 0;
}

@media only screen and (max-device-width: 1800px) and (min-device-width: 930px)
.side-bar-wrapper {
    display: none;
}

    You’ll need to set responsive breakpoints using media queries depending on the screen width to correct the sizing of the .side-bar-wrapper and .post-inner elements. For instance, set them all to a width of 100% for mobile phone screen sizes.

    p.s. If you’d like even more control over the layout of your site, you can add the Bootstrap Framework to your site using this guide. The 1140px max-width I chose based on the Bootstrap layout.

    Thread Starter userauser

    (@userauser)

    @nm1com Thank you.
    Now it’s working, few tweaks and it’s ready.
    Thanks again.

    Great to hear, @userauser! You’re welcome!

    If your question has been answered, it would be great if you would mark this topic as resolved in the sidebar. This helps the forum’s volunteers find the topics that still need attention and more people will get helped, possibly like you did.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Content Gap After Adding Sidebar – Twenty twenty Theme’ is closed to new replies.