Community Forums › Forums › Archived Forums › Design Tips and Tricks › Remove whitespace from sidebar
Tagged: white space sidebar
- This topic has 8 replies, 3 voices, and was last updated 10 years, 4 months ago by Minesh Rai.
-
AuthorPosts
-
December 9, 2013 at 9:07 pm #77950calderonjjavierMember
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/December 9, 2013 at 9:58 pm #77957Davinder Singh KainthMemberLook 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.
Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis ThemesDecember 10, 2013 at 8:00 pm #78221calderonjjavierMemberI 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
December 10, 2013 at 9:04 pm #78244Davinder Singh KainthMemberAs 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;
Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis ThemesDecember 10, 2013 at 9:56 pm #78264calderonjjavierMemberSo I somehow made it worse 🙁 Is there a reason why my side bar is appearing at the bottom of the page now?
December 10, 2013 at 10:26 pm #78265Davinder Singh KainthMemberOh, let's re-collect. You want to eliminate all white space around the following text in left sidebar, isn't it?
TEST
Cosmetics
Lipstick
FragrancesEmail me login details at iguiding AT gmail DOT com - will check for it.
Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis ThemesDecember 10, 2013 at 10:48 pm #78267calderonjjavierMemberI 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.
December 11, 2013 at 12:28 am #78283Davinder Singh KainthMemberPadding: 10px 0;
means top and bottom padding value is 10
and left and right padding value is 0For 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).
Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis ThemesDecember 21, 2013 at 8:07 am #80603Minesh RaiMemberHi,
@idavinderI 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
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.