Remove whitespace from sidebar

Community Forums Forums Design Tips and Tricks Remove whitespace from sidebar

This topic is: not resolved

This topic contains 8 replies, has 3 voices, and was last updated by  Minesh Rai 10 months ago.

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

    calderonjjavier
    Member
    Post count: 9

    I am trying to reduce the with of the sidebar to get rid of the white space. I have tried editing all the values in .sidebar .widget but have only been able to reduce the height and not the width. Where can I find the area to edit the width?

    http://www.javierprojects.com/
    #77957

    Davinder Singh Kainth
    Participant
    Post count: 1274

    Look for following code in style.css file.

    .sidebar .widget {
    background-color: #fff;
    border-radius: 3px;
    margin-bottom: 40px;
    margin-bottom: 4rem;
    padding: 40px;
    padding: 4rem;
    }

    Change padding: 40px; and padding: 4rem; values to reduce white space around text in sidebar.


    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #78221

    calderonjjavier
    Member
    Post count: 9

    I changed both padding: 40px;to 20 and padding: 4rem to 2; but the only one that did anything was the padding: 4rem; It still did not reduce the width. Any other suggestions?

    Thank you

    #78244

    Davinder Singh Kainth
    Participant
    Post count: 1274

    As of now your code is following:
    .sidebar .widget {
    background-color: #fff;
    border-radius: 3px;
    margin-bottom: 40px;
    margin-bottom: 4rem;
    padding: 10px;
    padding: 2rem;
    }

    Change it to and then check.

    .sidebar .widget {
    background-color: #fff;
    border-radius: 3px;
    margin-bottom: 40px;
    margin-bottom: 4rem;
    padding: 10px 0;
    padding: 1rem 0;
    }

    For no padding at all use padding:0px; padding:0rem;


    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #78264

    calderonjjavier
    Member
    Post count: 9

    So I somehow made it worse :( Is there a reason why my side bar is appearing at the bottom of the page now?

    #78265

    Davinder Singh Kainth
    Participant
    Post count: 1274

    Oh, let’s re-collect. You want to eliminate all white space around the following text in left sidebar, isn’t it?

    TEST
    Cosmetics
    Lipstick
    Fragrances

    Email me login details at iguiding AT gmail DOT com – will check for it.


    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #78267

    calderonjjavier
    Member
    Post count: 9

    I realized I was zoomed in more than I should have with my browser :) I change the padding to padding: 10px 0; I do not want to make the padding: 1rem 0; smaller. I have deleted the first padding and it tried decreasing it to 0 and following your instructions but it still stretches out more than I want it to.

    #78283

    Davinder Singh Kainth
    Participant
    Post count: 1274

    Padding: 10px 0;

    means top and bottom padding value is 10
    and left and right padding value is 0

    For exact padding values use this;

    padding: 10px 5px 10px 8px;
    which is:
    padding: top right bottom left;

    Change values as per requirement (so same for rem padding value).


    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #80603

    Minesh Rai
    Member
    Post count: 23

    Hi,
    @idavinder

    I am using Genius Sample theme. I want to reduce gap between the widgets. I made the changes in-

    .sidebar .widget {
    background-color: #ffffff;
    border-radius: 3px;
    margin-bottom: 40px;
    margin-bottom: 4rem;
    padding: 20px;
    padding: 2rem;
    }

    which looks like this-

    .sidebar .widget {
    background-color: #ffffff;
    border-radius: 3px;
    margin-bottom: 1px;
    margin-bottom: 0.1rem;
    padding: 20px;
    padding: 2rem;
    }

    This changes works perfectly fine on desktop version but however it breaks the mobile responsiveness. In mobile the widgets looks too much closer to each other.

    Plz suggest me the code that will reduce the gap on desktop version only and not the mobile responsive version.

    My site – http://www.crazyhints.com

    Thanks


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

You must be logged in to reply to this topic.