Community Forums › Forums › Archived Forums › Design Tips and Tricks › Changing Space Gaps
Tagged: Space Primary Sidebar
- This topic has 8 replies, 2 voices, and was last updated 7 years, 9 months ago by strifemit.
-
AuthorPosts
-
June 24, 2016 at 8:54 pm #188254strifemitMember
Hi Lifestyle Pro http://www.verasnetwork.com
On our website primary sidebar we have Social Icons and Simple Links. I want to reduce the space between:
Facebook and the icon
Facebook section and Health Products, Health Products and Quick Links, etc
Space above Health Products and Quick Links.Any help appreciated as has all the wonderful assistance so far,
Thanks, Lance
http://www.verasnetwork.comJune 27, 2016 at 11:37 am #188398ChristophMemberHi Lance,
I'd recommend looking into how to use the Inspector / Developer tools of your browser, e.g. https://www.nutsandboltsmedia.com/how-to-customize-your-genesis-child-theme-with-chromes-inspector/
1) Space between Facebook and icon (adjust margin-bottom for more space)
Add the following to style.css
.widget_social_icons h4 {
margin-bottom: 0;
}2) Space between the sections
In .sidebar .widget (around line 1416 in style.css)
adjust the value for margin-bottom3)
Space between title and border
In .sidebar .widget
change padding to
padding: 16px 32px;The first value is for top and bottom, the second value is for left and right.
June 27, 2016 at 3:03 pm #188410strifemitMemberExcellent. Thank you. That link is new to me. I'll work through it and hopefully I can then identify the area I want to change.
Thanks a lot.
June 28, 2016 at 10:07 pm #188495strifemitMemberHi
The example tells me how to change colours but nothing with fonts etc. I have played around quite a bit and you may be able to see that I have reduced the height of headings. I also managed to reduce the gap between Facebook and the logo. However I can't find how to change the gap between below headings main page or sidebar. I notice the links on the right are at the top of the box and I can't find out how to change that. I am beginning to understand but it isn't as straight forward as Studiopress indicate. Any useful pointers please?June 28, 2016 at 10:17 pm #188496ChristophMemberHi,
for fonts, you would add font-family, font-size, color and or font-weight to the selector.
The margin underneath the heading is set around line 236 of the style.css:
h1, h2, h3, h4, h5, h6 {
color: #222;
font-family: 'Roboto Slab', sans-serif;
font-weight: bold;
line-height: 1.2;
margin: 0 0 24px;
}I am not sure what you mean by links on the right.
Maybe you mean the margin-bottom of .simple-links-item (around line 1560)?
June 28, 2016 at 10:45 pm #188498strifemitMemberThanks for the speedy reply.
I'll do some more testing to see if I understand more and get it to sink in.
When I look at the links on the right there seems to be a line above and a line below each link and the link sits at the top of the box. IE against the line above. It probably doesn't matter because the links is roughly how I want it anyway. I am just trying to understand it more.
I am still struggling to work out how I reduce the space between for example Website Explained and the picture/text; in this case text A little ... and the robot.
Your help is really appreciated. I don't know where you reside but do have a variety of coffees for my Nespresso.
June 29, 2016 at 9:37 pm #188620strifemitMemberIt is supposed to be easy but it isn't that obvious and I have tried everything apart from pulling my hair out. Some things work but others don't change anything.
I still can't make the changes I want. The link you sent me is about inspector and the examples make sense. But colours are simple. It doesn't help with other areas.
I am adding another topic on pictures which is also driving me mad.
Is there an online class which helps people work through their CSS?
June 29, 2016 at 11:20 pm #188623ChristophMemberHi,
there is a definitively a learning curve. It gets much easier.
I am still struggling to work out how I reduce the space between for example Website Explained and the picture/text; in this case text A little ... and the robot.
See my answer above: The margin underneath the heading is set around line 236 of the style.css:
...
margin: 0 0 24px;
Change 24px to a smaller sizeI´m using the Inspector to find what needs to be changed. Just click on the area you want to change and see what css selectors are active.
Here is a more comprehensive course on the Chrome Devtools http://discover-devtools.codeschool.com/
The course is free but I think you have to sign up for an account.Here is a free Introduction to HTML and CSS: https://www.codecademy.com/learn/web
June 29, 2016 at 11:39 pm #188625strifemitMemberYou are amazing. Thanks so much. I'll definitely work through the course.
Much appreciated.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.