Default sidebar widget alignment problem

  • Resolved alfredino

    (@alfredino)


    8 months, 3 weeks ago

    Hi,

    I have a website dedicated to my hobby project on a machine running WordPress 6.8.2, PHP 8.4.12, and OceanWP 4.1.2. In a few words, I am using the free version of Polylang and recently discovered that it does not support widget translation (only legacy ones). I then found this very clever workaround that works quite well. However, if I add a text element (header hx) to the default sidebar, the vertical alignment of the first language is always wrong and inconsistent with the other languages.

    In details, I found that the culprit could be this CSS code:

     .sidebar-box {
        /* margin-bottom:40px; */
    }

    loaded by wp-content/themes/oceanwp/assets/css/style.min.css. So I tried to remove it via

    body.myLanguage .sidebar-box {
    margin-bottom: 0px;
    }

    The situation has improved, but the vertical alignment of the default sidebar is still incorrect. Could it be a theme issue? If not, do you have any suggestions?

    Thank you

Viewing 7 replies - 1 through 7 (of 7 total)
  • Shahin

    (@skalanter)

    8 months, 3 weeks ago

    Hello @alfredino,

    Thank you for reaching out,

    The vertical alignment issue you’re experiencing with the default sidebar is likely related to the Widget Margin Bottom (px) setting in the OceanWP Customizer. This option lets you control the bottom margin for each widget inside the sidebar, and adjusting it can help maintain consistent spacing between widgets across different languages. You can find more details and modify it here: https://docs.oceanwp.org/article/903-customizer-sidebar

    To improve vertical alignment, I suggest using the Widget Margin Bottom (px) option in the Customizer to set consistent spacing between all sidebar widgets. If you prefer using custom CSS, you can apply !important to make it stronger: https://developer.mozilla.org/en-US/docs/Web/CSS/important

    Please recheck your issue and keep us posted.

    I hope this helps,
    Best regards

    Thread Starter alfredino

    (@alfredino)

    8 months, 3 weeks ago

    Thank you for your fast reply. I removed my custom CSS code for the margin and then tried your suggestion without success. There is no difference compared to the code, and the problem with the first language is still present. You can see that even when changing the order of the various languages, the problem is still present with the first language.

    Could it be a problem related to the theme and the trick?

    Shahin

    (@skalanter)

    8 months, 3 weeks ago

    Hello @alfredino,

    Thank you for the update,

    I need to check your site using the Inspect Element tool.
    Please share a live URL of the page that has the issue so I can take a look.

    If you prefer not to share the link, you can inspect it yourself.

    Also, you can share the steps of the issue with us so that we can reproduce the issue on our end, somewhere other than your website. Then we’ll find a solution for it.

    ___
    You can learn how to use Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS:
    https://developers.google.com/web/tools/chrome-devtools/
    https://developer.mozilla.org/en-US/docs/Tools
    CSS Tutorial: https://www.w3schools.com/css/
    For more information about media queries, please read this article:
    https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Hope it helps,
    Best Regards

    Thread Starter alfredino

    (@alfredino)

    8 months, 2 weeks ago

    Thank you for your reply. I prefer not to share the URL publicly. So I disabled all plugins except Polylang and then compared the three code blocks in the sidebar, and they are the same. As I wrote before, by removing

     .sidebar-box {
        /* margin-bottom:40px; */ -> 0px
    }

    from the second and third languages (<div id=”block-43″ class=”sidebar-box widget_block clr>”), the alignment becomes correct at the top, but it is not correct for the subsequent elements in the sidebar.

    I am not sure what the problem could be (theme, Polylang, the trick). Therefore, I asked you for help.

    P.S. you can install the latest version of WordPress, your theme, and Polylang. Then you can add some headers to the sidebar (and use the CSS trick) and check if the problem persists. This way we can figure out if it’s specifically related to my website or to the theme+Polylang.

    • This reply was modified 8 months, 2 weeks ago by alfredino.
    • This reply was modified 8 months, 2 weeks ago by alfredino.
    Shahin

    (@skalanter)

    8 months, 2 weeks ago

    Hello @alfredino,

    Thank you for your feedback,

    To resolve that issue on your website, please put the CSS below in Customizing > Custom CSS/JS > CSS Code:

    .sidebar-box {
    margin-bottom: 0px !important;
}

    Please read this link for more information about the CSS/JS code on the customizer: https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website.

    Also, this topic has been forwarded to the developer team, and we’ll get back to you with the information once it is available.

    Thank you for using OceanWP, and I appreciate your patience.
    Best Regards

    Thread Starter alfredino

    (@alfredino)

    8 months, 2 weeks ago

    Thank you. I can confirm that adding !important to your CSS code (equivalent to my first code) solved the problem. Ia m also glad you forwarded the issue to your developer; I think they can fix it.

    Have a nice day.

    Shahin

    (@skalanter)

    8 months, 2 weeks ago

    You’re most welcome.
    Have a wonderful day.

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

The topic ‘Default sidebar widget alignment problem’ is closed to new replies.