Problem with sidebar under content

  • Resolved Lisa

    (@funkycrunky)


    2 years, 7 months ago

    Hi! I was having someone develop a custom WordPress theme for me. They have only got so far with it and for personal reasons are no longer able to complete the project. It’s not live so I’m unable to link to it. I have the files.

    The theme has a sidebar widget area and it’s supposed to be to the right of the main content. However, it’s showing underneath instead. I have tried looking into options but truth be told, I have no idea how to code or fix it.

    As far as I can see, this is the css styling for the content and sidebar:

    main { 
max-width: 800px;
margin: 0 auto;
}

.content-sidebar-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start; /* Adjust alignment if needed */
}

#main {
    flex-basis: 65%;
    margin-right: 5%;
}

.sidebar {
    flex-basis: 30%;
}

    And the content itself is starts like this:

    <div class="content-sidebar-container">
<main id="main" role="main">
        <div class="content">

    Can anyone help me with this? I have zero clue on how to fix this, I only know how to inspect elements on a browser!  😂

    Thanks in advance.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator t-p

    (@t-p)

    2 years, 7 months ago

    If this was a custom theme, you may have to go back to your developer team and ask them to make the necessary change(s) to the theme.

    As the developer is aware, commercial products are not supported in these forums.

    WP Theme Handbook:
    Theme Handbook

    A Theme Tutorial:
    The ThemeShaper WordPress Theme Tutorial

    Moderator bcworkz

    (@bcworkz)

    2 years, 7 months ago

    I only know how to inspect elements on a browser!

    That’s really the gist of what you need to do! 🙂 Inspect the main and sidebar elements and fiddle with their respective CSS until the elements appear side by side.

    Usually the reason for side by side elements stacking vertically is because there is not enough width as defined by CSS to fit both elements side by side. The flex basis appears to add up to 100%, but there could be additional spacing (such as margins) somewhere taking up more space.

    Unless we can see a live page demonstrating the issue, we’re unable to offer more specific advice. We’d essentially do for you what I’ve just described, inspect elements and fiddle with the CSS to resolve the issue.

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

The topic ‘Problem with sidebar under content’ is closed to new replies.