trying to increase sidebar width

  • Resolved fromthisday

    (@fromthisday)


    4 years, 4 months ago

    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 4 years, 4 months 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)

    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.

    Thread Starter fromthisday

    (@fromthisday)

    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.

    Thread Starter fromthisday

    (@fromthisday)

    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.

    Thread Starter fromthisday

    (@fromthisday)

    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.

    Thread Starter fromthisday

    (@fromthisday)

    Ok thanks!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘trying to increase sidebar width’ is closed to new replies.