I want to customize the body of the Wordpress Theme "attitude" in a way to remove the grey gap between the header (white space) and the top of the page. In other words, I want to remove exactly this grey gap and also the grey gap between the end of the body near the footer and the end of the site.
Here is a live demo of attitude: http://themehorse.com/preview/attitude/
Thank you very much in advance and please dont hesitate to contact me if there are any questions.
Best regards
From a quick look using the chrome dev tools, the header element seems to be the culprit. It appears they are applying a 30px top margin to it using the branding id selector.
#branding {
margin-top: 30px;
}
You can change this on line 549 of style.css.
Now for a lecture...
Not really, but I want to show you a few things to help you solve these types of problems in the future - It never huts to know more about the tools available to you.
You can open chrome dev tools by right clicking anywhere on the page and selecting Inspect element, or use the keyboard shortcut for your OS
In the very top left corner of the chrome dev tools panel that pops up there is a mouse pointer in a box symbol. If you click it to enable it and then move your mouse around the page you will see elements being highlighted in various colors.
Here we can see that the grey bar at the top has been highlighted in orange, and a large section below was highlighted in blue.
Clicking the left mouse button while the element is highlighted as above will jump to the element in the Elements tab of the inspection tools. We can see that the element we selected was a header, with an ID of branding
A quick scroll through the styles inspector on the right reveals a id selector for branding and a declaration to set the top margin to 30px. The inspecter is also kind enough to tell us where in the source code the rule comes from; style.css, line:549.
If we switch to the Source tab and open style.css in the inspector (or open the source code in a text editor) then we find the branding id selector on line 549 as promised.
For more information on how to explore webpages i recommend you read the dev tools guides for google chrome or mozilla (which ever browser you prefer to use most)
Firefox: https://developer.mozilla.org/en-US/docs/Tools
Google Chrome: https://developer.chrome.com/devtools
The reason the header is spaced off of the top by a little bit is because the header tag with the id 'branding' has the CSS property margin-top with the value 30px. This causes the header tag to be set 30px from the top of the screen. Just delete that line of CSS code to move the body to the top of the page.
Related
In some of the web developer debug tools when you hover over an element the margin or padding is shown with a yellow color so you can see it easily.
How are they doing this? Is it possible to do the same thing with CSS?
Update:
It looks like they are adding layers over the top of the original element (see image - the A is not completely highlighted meaning it's not a background color).
I'm a bit lost in the weeds trying to customize a jekyll theme. My repository is capecchi.github.io and I'm trying to get some menu icons centered. I have looked into how to do this and have successfully gotten the blog/project buttons centered, but for some reason my social buttons below are slightly off-center to the right. The only added class that I can see (in header.html) is the "navigation--social" class (defined in /css/uno.css), and I can't find where in this class it might define a left margin or anything. I'm new to web development and have been poking at this for quite some time (hence the "TESTING" button I added). I'm just stuck finding where this offset is coming from and would appreciate any input. Thanks!
There is a margin-left of 1.5em on .navigation--social (uno.css line 1391).
Actually, removing this margin centers the buttons quite good but not perfectly, because there is another margin-right on .navigation__item (uno.css line 1376). You should either put an equal amount of margin-left or remove the margin-right to get perfectly centered buttons.
I found this out by using the inspector of Firefox. Most browsers come with this feature, you can open it up by right-clicking the page and selecting "Inspect Element" from the context menu.
Screenshot of the inspector window showing the margins and the offending styles.
in our website:
http://www.herzfit-service.de/
can tell one help me why in safari on mac
The black triangle below the logo on the left doesn’t appear, and the note on top of the people bubbles on the left is to close to the black header. Seems like it disappears behind it.
I don't have a mac but one of the workers sent me a screenshot:
The problem occurs in any browser when it's resized to about 1366px or below.
The header element becomes taller, which hides the triangle and div w/ the class "interview" (the people on the left).
The easiest fix is probably to have the mobile menu appear around 1366px to avoid the menu items crowding the header bar. Or you can try media queries to set extra top margins on the elements that are disappearing.
If you are not a developer I suggest hiring one for these fixes!
Remove the following CSS style in your CSS file :style.css?ver=4.2.2
Line No:3475
.header-main {
padding-right: 0;
}
Remove this CSS style add check it in all browser it will work....
I see in the HTML tab of firebug i can drill down into the html elements of the page and it will highlight those sections on the page.
Is there anyway to do the opposite where i simply highlight over some area on a page and it will point me to that html inside firebug so i can see the html and css that is generating this?
You can right click in the page and choose inspect element. Chrome also features this. In IE 9 you can press ctrl+b with the developer tools window active. The next element you click will jump to the element in DOM explorer.
The blue rectangle at the upperleft corner can be clicked. Then, hover over the page, and click at any element to show the HTML tree and relevant CSS properties.
This feature is useful if you don't know which element has to be inspected, but if you know the rough area of the elements. During the hover, a blue outline will appear around the hovered element.
There's a button with a mouse pointer over a blue rectangle. It allows you to go to the actual site and select something, which makes firebug highlight the relevant section of HTML and the styles related
In firebug, click on the arrow with the box in the upper left. Then click on your item in the page.
I have a strange problem, and I can't find the cause! I have the following webpage:
http://uk.translation-vocabulary.com/de-german
and the perceived width of the page is perhaps 300px greater than the width of the content. So a horizontal scrollbar is present even when the viewport is horizontally stretched to match the visible content.
I have been inspecting elements with Firebug, trying to find the culprit. No success so far.
This effect observed in Firefox, Safari, Chrome. Untested: IE.
Any help greatly appreciated!
Benjamin.
Two ways to diagnose the culprit.
Method A
Open the Chrome dev tools in the Elements tab.
Expand all elements under HTML by hovering over the triangle on the left, then Ctrl+Alt click (Windows) or Option click (Mac).
Hover your mouse over each element and see if it highlights inside the area on the webpage making it too wide.
Method B
Open the Chrome dev tools then hit Esc to open the console.
Paste in this code and hit Enter.
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
This will find all the elements in the page overhanging. Thanks to Chris Coyier https://css-tricks.com/findingfixing-unintended-body-overflow/
Your facebook button is causing this problem (removing the button makes the problem go away).
The facebook iframe has its width set to 575px via the style attribute, which is causing the page to be wider than 100%.
Note that you can add the CSS rule html,body{overflow-x: hidden;} to mask the problem, but instead, you should really fix that button.