WordPress.org

Forums

twenty eleven narrowing browser cuts off sidebar item (11 posts)

  1. prowriter
    Member
    Posted 2 years ago #

    I created a Twenty Eleven child theme, and I'm using the Simple Razoo Donations plugin on my site. I found a way to get the donations box in the sidebar, but now when I narrow the browser at a certain point the box gets cut off slightly. I've tried using Firebug to figure out what the problem is (I'm new at this!), but no luck. I'd appreciate any help. Here's the site I'm developing: http://www.casaguadalupana.org/here. Thanks!

  2. wiredimpact
    Member
    Posted 2 years ago #

    Hi @prowriter, happy to see you're using the Simple Razoo Donations plugin.

    It looks like the issue you're dealing with stems from the fact that the Twenty Eleven theme is responsive. Basically, the way it works is when the browser window is no smaller than 800 pixels wide the sidebar takes up 30% of the entire website's width. Since the Razoo donation form is 300 pixels wide, anytime the sidebar shrinks to less than that some of it is going to get cut off.

    For example, if the browser window width is 850 pixels wide the sidebar is only going to be 255 pixels wide (850 pixels x 30% = 255 pixels), which isn't big enough for the donation form.

    To fix this you may need to adjust the #secondary style on line 30 of style.css. Right now it reads:

    #secondary {
      float: right;
      margin-right: 3.9%;
      width: 30%;
    }

    If you adjust the width to be 38% or greater the box should never be cut off. I will say that this may have unwanted affects on the rest of the layout, so please check the rest of the theme after making a change.

    I hope that's helpful.

    Jonathan, Wired Impact

  3. prowriter
    Member
    Posted 2 years ago #

    Thanks, Jonathan! I tested it, and the lowest I can go is actually 41%. At that width, it's not really a sidebar anymore since it takes up almost half the page. That's the only solution?

  4. wiredimpact
    Member
    Posted 2 years ago #

    Yeah, that's not really going to work. Right now I think there is about 4% dedicated to the margin on the right-hand side. You could try removing some of that to make the sidebar a little smaller.

    This really ends up being about adjusting the width based on the size of the browser window. Checking out the article at http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ may help you get a better idea of what you're working with.

  5. WPyogi
    Forum Moderator
    Posted 2 years ago #

    @prowriter -- you could consider putting a smaller section in the sidebar -- something like a "DONATE NOW!" graphic -- which would then take people to a separate page to make the actual donation (where you would have the form, etc.)? Just a thought.

  6. WPyogi
    Forum Moderator
    Posted 2 years ago #

    I know you want to maximize the donations and make that as easy and appealing as possible for visitors (I've worked for non-profits for a long time...), but you also don't want the site to be wonky :)!

  7. wiredimpact
    Member
    Posted 2 years ago #

    Great suggestion @WPyogi. That's also far easier to implement too.

  8. WPyogi
    Forum Moderator
    Posted 2 years ago #

    I think you can also then use the Donations page to your advantage -- i.e. maybe put a unique sidebar (for that page) with links to testimonials or good stories about how donations make a difference to the organization and the work they are doing...

  9. prowriter
    Member
    Posted 2 years ago #

    Thanks for the replies. I really would like to keep the Razoo widget on the front page. Eventually I'm going to put a slider beside it with pictures linked to success stories. Anyway, because I'm a perfectionist, this problem is driving me crazy! Is there a way to make the widget line up with the bullets in the Recent News section about it? It looks like there's some padding around the widget that I can't figure out how to get rid of. Seems like that would fix the problem. Any other suggestions?

  10. prowriter
    Member
    Posted 2 years ago #

    Typo... should have said "Recent News section ABOVE it."

  11. wiredimpact
    Member
    Posted 2 years ago #

    The reason it's not lining up with the bullets above is because the css dictates that the bullets fall outside of the container. If you want those to line up you need to move them inside. Check out the list-style-position css property to do this. You can read about it at http://www.w3schools.com/cssref/pr_list-style-position.asp.

Topic Closed

This topic has been closed to new replies.

About this Topic