WordPress page-container padding - html

I am unable to remove padding gap at the top of my page just below the navbar in a Wordpress theme (divi). I think I've identified the possible culprit as being the page-container div, which has a top padding of 78px. http://i.imgur.com/WruF7Aa.jpg
50px seems to remove it when tinkering within the browser preview, but it won't carry over when I make the change and reload the page. http://i.imgur.com/UerrgHL.jpg
I've tried about 10 different CSS overrides within the theme, but nothing seems to remove it. Does anyone have a possible suggestion? I'm out of ideas.

The padding-top: 78px style has been added inline which is why it overwrites the padding-top which you add inside your stylesheet. You will need to use !important here. You can add this CSS at the bottom of your stylesheet and this should work:
.et_fixed_nav #page-container {
padding-top: 0px !important;
}

Related

Whitespace at top of webpage

I am having an issue with around 20px of whitespace at the top of my webpage. It is hard to see but when you inspect element you can see the little gap at the top.
www.craigengland.co.uk
I have adopted
* {
margin: 0;
padding: 0;
}
but to no avail
Any suggestions?
I have tried "normalize" locally and it still doesn't fix the problem.
svg tag content after the body tag and before the header tag is causing that. Remove that whitespace issue will be fixed or if you want to do this using CSS, Add the following code to your css file.
svg{display:none;}
Add style="display: none" to your svg element and it should work.
Remove margin-top from header.
header {
margin: 14% 0 0; /* remove this from main.css */
}
well, while inspecting your web page. its show this whitspace in the header because of the margin you have given to it in the css
margin: 14% 0 0% 0%;
when I disable the margin you have given, the white space is no more to be seen . Header tag looks fine without that margin setting you gave.
I don't see any other error!

half page full width Styling CSS

I am currently working on this website: http://mdftanzania.com. I am using Wordpress and headway101. I want to have a full width green background color that applies to the begin part of the page: About Us and Services. I add a div class to the part of the page where the green background has to be. I tried to style the div class to a full width green background, this didn't work out and at the moment only a part is styled now (see the website: http://mdftanzania.com).
I understand that there is another solutions, that is creating a container or widget above the container for the content, where I place the first part of the page text in. The problem with this is that it is confusing for my client where to edit the text in the page. The simplicity of Wordpress goes basically away then. Because of that, I am looking for a solution with CSS styling, so the client is only dealing with the 's.
Does anybody has a solution for this?
Since you have predetermined a padding to the content block, it is obviously affecting all the child elements that are contained in it, including the div with green background, which means that you should either remove that padding and apply it only to specific elements, or apply this simple CSS workaround to your div:
{
margin: 0 -25px;
padding: 0 25px;
}
This makes it, in your words, "full width" and applies a padding to its content.
You have this rule set in your css:
.block-type-content {
padding-left: 25px;
padding-right: 25px;
padding-top: 120px;
}
So children of this container, even though they may have a width of 100%, have to obey this padding of their parent. That's why you don't get a full width green bar. You might try negative margin-left and right to expand your green bar:
.color {
margin: 0 -25px;
padding: 0 25px;
}
At least in Firefox/Mac, this solves your issue.

Getting rid of white space below footer

I'm using the bootstrap 3.0 framework and no matter what I do I cannot get the little white space after the footer to disappear.It only shows in Chrome though, in IE it's fine.
I've used min-height, overflow:hidden,different margins still nothing.
http://www.bootply.com/XonUL6Vq2C
I'm sure there is some simple fix that eludes me.However it is driving me mad.
Can anyone offer a solution to this?
In your CSS, you are using 50px margin for both the top and bottom of the footer.
Remove the margin from your footer.
If you want to apply margin only on the top of the footer, use this:
footer {
margin: 50px 0 0 0; /* or just use: margin-top: 50px;*/
}
UPDATED CODE
You are using min-height and padding bottom in #cfoot.container. Remove that and you'll get as you expect.
working demo
Just add a negative margin-bottom until the white space is filled.
E.g
footer { margin: 0 0 -50px 0;}
It sometimes also happens when you forget adding a closing tag of a section.

Remove unexplainable img margin/space (CSS)

I have some unexplainable image margin/Space below img when including images in my wordpress theme. You can see it here: http://www.wlanradios.net/logitech-squeezebox-radio/
See the Amazon logo image inside the content or scroll down and have a look in the "Ähnliche WLAN Radios" sidebar widget with the small thumbnails. The images seem to have a little margin-bottom / Space below it I can not get rid off. I discovered the html/css with firebug but don't get the it where this margins comes from. I in fact tried to
img {
margin:0!important;
padding:0!important;
border:0!important;
}
to overwrite every possible causes for the margin, with no success.
Where is the margin coming from and how to remove it?
Just put to those imgs :
display: block;
UPDATE:
Some explanations: img is an inline element, so it has to deal with white-space, line-height, etc., as all inline elements. I guess the space you're seeing is actually caused by the line-height. So another solution if you want to keep your img as inline elements is to set its parent line-height: 0;.
Have you tried: vertical-align: middle
I have Deeply inspected the Issue, its a bit of haystick needle kind of thing.
1) Amazon Image box - Issue is with the td tag which creates a all sides padding of 6.71667px , This is FORCEFULLY created by the td,th padding which is set to 0.5em
th, td {
border-spacing: 3px;
//Tweak this Padding of 0.5em and you should destroy Amazon Extra Space
padding: 0.5em;
border: 1px solid #CCC;
}
You should be able to find and edit from line 183 of the above css theme from wp-content/themes/ar2-2-b-2-fixed/styles.css
2) Coming to the second issue with WLAN Radios Pic , This image is pushed in due to the DIV tags Padding all set to 4px which is acting on the WLAN Radio pics.
Here are the Issue Pics:
Amazon Image Issue Solved Pic
Hope this Helps :)
Check for your line-height on the img elements, and set it to 1. You must have a line height > 1 on a parent element.
You can also change the display of those img to 'block' (to avoid line spacing).

Unwanted white areas on HTML page

I've made a site using with a CSS made from scratch.
The Page The CSS
Randomly there are unwanted white spaces in two places:
Above the main content area (below
the menu bar).
Below the main content area and
sidebar and above the footer.
I've experimented with various methods of fixed the problem like margins and paddings but they didn't seem to work.
What could I do to get rid of these white areas?
The extra white space comes from the browser's default stylesheet. Add these rules:
h2 {
margin: 0;
}
h4 {
margin: 0;
}
To solve this problem, and prevent future ones, I recommend using a CSS reset. Eric Meyer's is a widely recommended one; another good option is the YUI CSS Reset.
You need a css reset. For example the white space below the menu bar is caused by the browser default margins of the .maincontent h2.
Personally I prefer to reset the styles for the selectors that I use, but there are general css resets like Eric Meyer's Reset CSS.
Your maincontent h2 and footer h4 both have margins(.83em and 1.33 em respectively) set them both to 0
Have you checked out your css in IE?
.maincontent {
background: #0F3;
height: 300px;
width: 580px;
float: left;
}
basically, you need to add float:left; to your maincontent css
1.) The "Main Page" header has a top margin of 19 pixels. This causes that 19 pixel area of white space.
2.) The entire Footer has a top margin of 21 pixels. This causes that 21 pixel area of white space. Also, for fixing the issue below sidebar, solving 1 + 2 may automatically resolve this.
try adding the following to the top of your stylesheet:
body, h1, h2, h3, p
{
margin:0;padding:0;
}
This ensures that all browsers' default padding/margin are set to 0, so its consistent. Then you can add padding/margin where you need it.