Sidebar- how to minimize 'white space'

Community Forums Forums Design Tips and Tricks Sidebar- how to minimize 'white space'

This topic is: resolved

This topic contains 8 replies, has 2 voices, and was last updated by  Gary Jones 5 months, 3 weeks ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #68004

    femineen
    Participant
    Post count: 10

    How do I minimize the ‘white space’ between banners. There is too much space between ads in the side bar widget area. I want the banners/ads a little closer together.

    • This topic was modified 6 months ago by  femineen. Reason: didn't give correct url at first
    • This topic was modified 6 months ago by  femineen. Reason: didn't give correct url at first
    http://www.naturallyyoursboutique.com/NEWsite2013
    #68080

    Gary Jones
    Moderator
    Post count: 622

    If you’d like to disable all of that right-click and No-F12 key script stuff, then I’ll be happy to help. All that is doing is hindering development. I can still grab whatever text or image assets you think you’re protecting (you’re not).

    (It’s the 30px / 3rem padding value on .sidebar .widget () )


    Changes in Genesis 2.0 – the ultimate guide to every single change in Genesis Framework 2.0, 2.0.1 and 2.0.2 (all 159 of them!) | @GaryJ

    #68107

    femineen
    Participant
    Post count: 10

    Hi Gary!
    thanks for responding to my question.
    I have the ‘right-click/No-F12″ script plugin because I am going to have a lot of hairstyle photos and people ‘steal’ pics as their own…for the average joe visiting my site, I wouldn’t think they knew how to still be able to ‘grab’ my text and images…or would they?

    Is the above: (It’s the 30px / 3rem padding value on .sidebar .widget () ) the code I need to insert into my editor section?
    What is your process?
    BTW- I’ve disabled the ‘right-click/No-F12″ script plugin –do your thing brother!

    Thanks so much!
    Rene’

    #68162

    Gary Jones
    Moderator
    Post count: 622

    I have the ‘right-click/No-F12″ script plugin because I am going to have a lot of hairstyle photos and people ‘steal’ pics as their own…for the average joe visiting my site, I wouldn’t think they knew how to still be able to ‘grab’ my text and images…or would they?

    The average person, maybe not. But anyone who really wants the photo would already know how to grab it, You’re protecting F12 for instance, which usually brings up the developer tools / inspector / console, but hitting Ctrl-Shift-I also opens it up. Grabbing images is trivial, since each one I view is then in my browser cache which is on my local machine.

    My typical process is to right click on the troublesome element, and select Inspect. The relevant CSS that affects that element is then shown immediately.

    The whitespace is coming from the 30px and 3rem padding value on the .sidebar .widget ruleset in your style.css. If you want a smaller whitespace then reduce that number (decimals are allowed e.g. 15px = 1.5rem).


    Changes in Genesis 2.0 – the ultimate guide to every single change in Genesis Framework 2.0, 2.0.1 and 2.0.2 (all 159 of them!) | @GaryJ

    #68180

    femineen
    Participant
    Post count: 10

    Which part do I need to change?

    Sidebars
    —————————————————————————————————- */

    .sidebar {
    display: inline;
    font-size: 14px;
    font-size: 1.4rem;
    padding-bottom: 30px;
    padding-bottom: 3rem;
    }

    .sidebar p {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
    }

    .sidebar p:last-child,
    .sidebar ul {
    margin: 0;
    }

    .sidebar li {
    background: url(images/icon-li.png) no-repeat 0 7px;
    background-size: 8px 8px;
    margin-bottom: 6px;
    margin-bottom: 0.6rem;
    padding: 0 0 6px 16px;
    padding: 0 0 0.6rem 1.6rem;
    }

    .sidebar ul > li:last-child {
    margin-bottom: 0;
    }

    .sidebar .widget {
    margin-bottom: 0;
    padding: 30px 40px;
    padding: 3rem 4rem;
    word-wrap: break-word;
    }

    .sidebar .search-form {
    width: 100%;
    }

    #68385

    Gary Jones
    Moderator
    Post count: 622

    Change

    .sidebar .widget {
        margin-bottom: 0;
        padding: 30px 40px;
        padding: 3rem 4rem;
        word-wrap: break-word;
    }
    

    to:

    .sidebar .widget {
        margin-bottom: 0;
        padding: 15px 40px;
        padding: 1.5rem 4rem;
        word-wrap: break-word;
    }
    

    Tweak that 15px and 1.5rem to suit.


    Changes in Genesis 2.0 – the ultimate guide to every single change in Genesis Framework 2.0, 2.0.1 and 2.0.2 (all 159 of them!) | @GaryJ

    #68413

    femineen
    Participant
    Post count: 10

    Yes! Yes! Yes!
    Thank you so much Gary!
    it worked…whew! my sidebar looks and feels so much better now! yeah!

    #68415

    femineen
    Participant
    Post count: 10
    This reply has been marked as private.
    #68622

    Gary Jones
    Moderator
    Post count: 622

    Please start a new thread for new topics :-) I’ll close this one as resolved.

    (http://gamajo.com/split-sidebar-genesis might help though)


    Changes in Genesis 2.0 – the ultimate guide to every single change in Genesis Framework 2.0, 2.0.1 and 2.0.2 (all 159 of them!) | @GaryJ

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Sidebar- how to minimize 'white space'’ is closed to new replies.