Support » Theme: Dara » trying to increase sidebar width

  • Resolved fromthisday

    (@fromthisday)


    Hiya, for my website the sidebar is too narrow. I would like to increase the size for desktop users so that it is 300px.

    I tried to add some CSS:

    @media ( min-width : 1100px ) {
    #sidebar-primary { max-width: 35%; }
    .content-area { max-width: 65%; } }

    But this did not work. So I tried this other CSS:

    @media ( min-width : 1100px ) {
    #secondary.widget-area { max-width: 35%
    max-width: 300px
    margin-right: 1%; }
    .content-area { max-width: 65%; } }

    Both CSS codes made the content area smaller but the sidebar area was unaffected. Note: I have removed this CSS now since it didn’t work.

    • This topic was modified 3 months, 3 weeks ago by James Huff. Reason: redundant link removed

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

Viewing 8 replies - 1 through 8 (of 8 total)
  • Moderator James Huff

    (@macmanx)

    Volunteer Moderator

    It will work, but you’ll need to decrease both the max-width and width of .content-area as well, it’s a delicate balancing act.

    Thanks for the reply. How would I decrease the width? I thought we were supposed to only put the max-width?

    Hi there,

    You need to also adjust the width property.

    Thanks, I’ll give it a go. Would this be correct?

    @media screen and (min-width: 1000px)
    {
    .content-area {
    float: left;
    width: 70%;
    max-width: 825px;
    margin-left: -30px;
    }}
    @media screen and (min-width: 1000px)
    {
    #secondary.widget-area {
    width: 30%;
    max-width: 300px;
    }}

    Yes, I can see that the sidebar is getting wider when I apply that CSS.

    Thanks, I’m kinda struggling to find the right size since if it goes too big the sidebar disappears. Too small and there’s no difference. It also seemed weird that the sum of the widths doesn’t need to add up to 100%.

    Decreasing the content also makes the margin too small which makes it hard to read.

    Is there a way to make the blank space on both sides of the website smaller? That would increase the space I can work with.

    That theme doesn’t have a border that can be adjusted in neither the main area or the sidebar. So, you’ll have to play with those width values until you find a somewhat perfect spot.

    Ok thanks!

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.