WordPress.org

Ready to get started?Download WordPress

Forums

how do i move my sidebar to the right? (16 posts)

  1. stargirl1
    Member
    Posted 2 years ago #

    hi, i'm using presswork theme and would like to move my sidebar a little more to the right. if you look at the blog page http://lizartlizard.fortuin.info/blog/ it looks a little too close to the text. i've tried using firebug, but can't figure out exactly how to move it over.

  2. Peter Wooster
    Member
    Posted 2 years ago #

    I find the web inspector in Safari to be easier to use than Firebug. Your site has a block quote that is too big, when I get back to my computer I'll take a look.
    /Peter

  3. stargirl1
    Member
    Posted 2 years ago #

    i don't think the block quote is the issue, i took out the width and it's exactly the same. if you look at some of the other pages on my site you can see it too. or maybe i'm the only one bugged by it lol.

  4. Peter Wooster
    Member
    Posted 2 years ago #

    The wide block quote is an iPad problem, it looks fine in Safari on the Mac.
    /peter

  5. stargirl1
    Member
    Posted 2 years ago #

    still, back to the original question, i'd like to know how to move the sidebar over so it's more centered within the white space between the story text and where the striped background begins. this is not a block quote question.

  6. Peter Wooster
    Member
    Posted 2 years ago #

    You could try adding a wider left margin to the first sidebar. It's currently set to 15px, and you have room for more, so try

    #firstsidebar{
       margin-left:30px;
    }

    The problem with the block quote is that the width is fixed in the .pformat style at 600px. This effects iPad and narrow windows on pc browsers.

    /peter

  7. Peter Wooster
    Member
    Posted 2 years ago #

    you may need to make the first sidebar a bit narrower, the text is max 210px in size, so setting the width to 220px should work.

    /peter

  8. Peter Wooster
    Member
    Posted 2 years ago #

    I got it to move with the following:

    #firstsidebar { width: 220px; margin-left:80px !important }

    The !important is needed because the rule for #main-wrapper > li is more specific and overrides the rule for firstsidebar.

    /peter

  9. Peter Wooster
    Member
    Posted 2 years ago #

    The following gets rid of the !important and provides a more flexible layout that works better on the narrow browsers. Adjust the margin-right to control the placement.

    #main-wrapper>li#firstsidebar { width: 220px;margin-right:20px;float:right; }

    /peter

  10. stargirl1
    Member
    Posted 2 years ago #

    thank you :)

  11. stargirl1
    Member
    Posted 2 years ago #

    um, do i add the second bit of code in addition to the first bit or just get rid of the first bit?

  12. stargirl1
    Member
    Posted 2 years ago #

    um i don't like how the text is pushed in with the window instead of resizing automatically like before. it is especially noticeable on the other pages like the main page where the text is pushed down below the pic instead of staying to the right of it.

  13. Peter Wooster
    Member
    Posted 2 years ago #

    You should use the last piece of code, it provides a more flexible layout. If you want automatic resizing you will need to replace the width in pixels with one that is based on percentages of the containing element. This is a lot of work.

    There are media queries in your style sheets that let you change styles based on screen width, you need to add styles in there.

    /peter

  14. stargirl1
    Member
    Posted 2 years ago #

    ok thanks!

  15. stargirl1
    Member
    Posted 2 years ago #

    hi, i just tried the following code, would this not work too?

    #firstsidebar {padding-left: 30px;}

  16. Peter Wooster
    Member
    Posted 2 years ago #

    That will be similar to the first version I sent, but doesn't need the !important since there is no padding specified on the li. Padding is inside the border while margin is outside. Some versions of IE get padding wrong. Padding also is part of the specified width while margin is not.
    /Peter

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.