0

Ever since my previous website update (developer no longer with me), I am having an issue with Wordpress widgets on my sidebar moving to below the content, rather than remaining on the sidebar on https://morpheustrading.com/blog/.

The issue seems to be that ALL widgets are moving to the bottom of the page if the text content is too wide in any individual widget.

For example, a narrow HTML block of code remains on the sidebar, but all widgets move to the bottom if I try to use a widget such as "Most Popular Posts" or "Related Posts" because the text in these widgets is apparently too long.

Rather than wrapping the text, the whole widget moves to the bottom.

I have spent hours Googling and trying different solutions to adjust the width of the sidebar, but still have not managed to resolve the issue.

Maybe I only need to set the text to wrap, rather than adjust the sidebar width. Not sure, as my coding experience is limited.

My Wordpress site is using a custom theme built on underscores.me.

Would greatly appreciate any assistance.

Thank you.

3
  • do you mean the blog posts, you want them at the side? from the link you provided, I can't see what the issue is.
    – mir
    Apr 6, 2022 at 9:11
  • 1
    this looks like a CSS/styling issue, you shouldn't need WordPress expertise or knowledge to solve this
    – Tom J Nowell
    Apr 6, 2022 at 9:19
  • @mir The current sidebar is displaying properly because I am using narrow enough text content. However, If I try to use a basic widget such as Related Posts or Most Popular Posts, then ALL widgets move to the bottom of the page because the title text of the links is wider than the sidebar widget AND the text is not wrapping. Sorry if I was not clear about that.
    – DieselDog
    Apr 6, 2022 at 9:25

1 Answer 1

0

did you try this css property:

word-wrap: break-word;

There is a few others:

overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;
10
  • Thanks for the suggestion. Does this code go in Appearance --> Additional CSS section? Or style.css? Sorry that my experience level is minimal, but I am trying hard. :-)
    – DieselDog
    Apr 6, 2022 at 9:39
  • it can go into either section but you need to target the correct class, so if it is within the .sidebar section you would write .sidebar{ word-wrap: break-word;} You should always test css changes with the developer tools of your browser before applying them. also for a live website, you may need to purge the cache after applying the changes. this may affect performance temporarily of the website. if you can set your website to the appearance that is wrong I can have a look and try see if I can recommend anything
    – mir
    Apr 6, 2022 at 9:42
  • Thanks so much for trying to help, but still having same issue after trying to add .sidebar{ word-wrap: break-word;} in Additional CSS and then again trying in sidebar.php. I tested by adding Most Popular Posts widget, but it still causes all widgets to go to bottom of page due to the width.
    – DieselDog
    Apr 6, 2022 at 9:51
  • it may not be sidebar class that you are targeting. I can't see the class in your website. if you publish those widgets that set them to the wrong position temporarily, i can take a look, and see if i can help further
    – mir
    Apr 6, 2022 at 9:53
  • your sidebar is an id of #sidebar-1 so it would be #sidebar-1{ word-wrap: break-word;}
    – mir
    Apr 6, 2022 at 9:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.