Sidebar Layout issues

Hi @josephineremo

There are specific CSS code on this page to add extra space around the main article section. As a result, the sidebar doesn’t have enough space and is going to the bottom.

We could add another extra rule on top of the previous one to remove this extra space, but it would be better to find what is adding this space first.

Also, the stylesheets (CSS code) of your website is quite odd: there are many empty inline blocks and no standalone stylesheets. This looks like an issue with an optimization plugin and is probably related with the sidebar problem you encounter.

Can you try to disable your optimization plugin(s)? It will allow to find from where the extra code is coming.

@josephineremo

Go to Appearance ——-> Customize ——-> Additional CSS and paste this:

@media (min-width: 922px)
.single-post .site-content>.ast-container {

display: flex;
}

Hope that helps ??

Hi! The code didn’t work. I’ve now tried to deactivate my optimisation plugin (WP rocket).

@josephineremo Yeah, don’t use this code (make sure you removed it). As mentioned, it’s better to look for the underlying issue than to add a CSS patch on top of the bug without understanding what’s going wrong. Besides, the code is crap.

Thank you for disabling WP Rocket. We now have a better overview. The bug applies to all blog post pages now. It looks worse, but it’s actually better because it’s consistent at least. Don’t worry, we’re going to fix it soon.

Is there a lot of CSS in the Additional CSS of the Customizer (Appearance > Customize)?

Okay. The code is deleted now. Yes, there is a bit of code in the CSS. Mainly because a web developer helped me update menus, colors and other things…

Alright. Strangely, the code seems coming from the theme itself but this shouldn’t create such as bug. Can you review you Blog Page spacings? In Outside Post Spacing you should see: top: 100px right: 10px bottom: 50px left: 20px If so, try to set right and left to 0.

See: https://wpastra.com/docs/blog-archive-spacing-controls/

Hey. Did not now and it doesn’t fix it..

@josephineremo

Ig he means this part:

Paste this.

.site .site-content #primary {
 margin-left: 0px;
 margin-right: 0px;
}

If it don’t work, use !important property. More on that: https://www.w3schools.com/css/css_important.asp

Did not now and it doesn’t fix it..

Do you confirm that Outside Post Spacing was set to 10px right and 20px left? Did you set both to 0 as explained here?

If so, or if you just want to add a patch to fix your sidebar layout bug without fixing the underlying issue, you can use the following CSS snippet:

/*
 * Fix Sidebar Layout Bug on Blog Posts
 * https://www.ads-software.com/support/topic/sidebar-layout-issues-2/
 */
.single-post .site .site-content #primary {
  margin-right: 0px;
  margin-left: 0px;
}

Add this to the Additional CSS section of the Customizer. Do not use !important unless you absolutely have to. Instead, increase the CSS selector specificity. See https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#the_!important_exception

The spacing wasn’t set at all. Went to Customize > Blog > Blog Archive and went down to Post Spacing > Outside Spacing. I tried both putting the settings to Top: 100, Right: 10, Bottom: 50, Left: 20 and Top: 100, Right: 0, Bottom: 50, Left: 0. Cleared my cashing in between but none of it worked. I put the code now and it works. I wonder what is the bug though?

• This reply was modified 10 months ago by josephineremo.

Thanks for the clarification!

Something is adding a slight margin to the left and right (“outside spacing”) to the main section of the article. As a result, there’s no longer enough space to display the sidebar and it’s sent to the bottom.

This something seems to be the theme itself. This doesn’t make much sense, since the theme should adapt the layout to ensure that the sidebar remains on the side. But it’s possible. There should be a setting somewhere in the theme/Customizer settings where the left margin is set to 20px and the right margin to 10px. This could be called “margin” or “outside spacing”. You can search for these settings and set them to 0.

If you can’t find these settings, you can also submit a ticket to Astra support for help in identifying where these settings are. I recommend that you link to this thread in your request. See: https://wpastra.com/support/open-a-ticket/

Just so you know, the CSS snippet overwrites the theme settings so that the spacing is always set to 0. This works well for now. But it could prevent you from changing the settings via the UI in the future if you wish. In addition, the theme might update the underlying code about this in the future and the CSS snippet would no longer work.

That’s why I recommend solving the spacing problem at the root and not adding another level of CSS rules. Don’t worry, it’s not dramatic, it’s just best practice. It’s perfectly fine to keep the CSS snippet as it is.

Finally, feel free to enable again WP Rocket, but be sure to reset its settings (especially with regard to CSS optimization) and maybe keep them as default to avoid the CSS problems your website was facing. However, as your hosting provider (Hostinger) uses a Litespeed server, I strongly recommend that you switch to LiteSpeed Cache plugin. It will work in perfect synergy with the server and you’ll probably get better results than with WP Rocket. See: https://www.hostinger.com/tutorials/litespeed-website-optimization-tool/

Hey! you were right. Now i found the place in the theme settings and was able to fix it without the CSS snippet.

Awesome! Will definitely look into the caching solution ?? Thanks again

Awesome! That’s really great.

Please, don’t forget to mark your post as solved. Thank you!

Have a nice day @josephineremo

Wil do ??