https://oisteinhaugland.github.io/cabinProject/pages/order.html
On this page of the website, and on this page only, i get a weird whitespace beneath all my content. I've tried margin, padding zero etc. I use normalize.css to begin with, and the problem only occurred in on of my last commits, and i don't know whats causing it.
If you inspect it, it just targets the html element, which is above the whitespace.
The html haven't changed, and the css shouldn't affect it.
Styling for the footer is the same for all pages.
Any suggestions?
Anything is appreciated.
full repository https://github.com/oisteinhaugland/cabinProject
remove the height:400px from the captcha iframe.
this style is coming from main.scss so you will either need to remove it, or add an overriding style after the main.scss file is included in the page
iframe {height:inherit;}
Related
I added a fullwidth menu module in divi elegant themes. This should work fine, but for some reason it always generates white space above.
I could just add some css to fix the problem but the people at divi found it smart to make the extra white space an inline style. As the page is generated dynamically I cannot prevent this from being added.
I tried to add additional css with the visual builder itself.
I also went to the style.css in WordPress to add the additional code to the div, but this does not work.
As for using the inspect function in a browser and directly editing the style it works but like I said above after the page is generated I can of course edit the inline style, but how do I make it so that this is not generated to begin with.
<div class="et_dropdown_animation_fade et_pb_bg_layout_light et_pb_fullwidth_menu et_pb_fullwidth_menu_0 et_pb_module et_pb_text_align_left"
data-fix-page-container="on" style="margin-top:48px; padding-top:0px;">
So the thing I am trying to accomplish is that the margin becomes 0 bypassing the inline styling or a method to inline style from the backend in WordPress.
As adding styling to the css file does not work.
This is generated by Divi's JS. Would be better if you could share a public URL, but if you're looking for a quick patch, you could jquery to get the "top" value after the module is loaded, then counteract it with a negative margin-top of the same value.
Add this to your Divi Theme Options integrations tab (or in a .js file, then call it from your child theme's functions.php file, without the tags of course):
</script>
jQuery(document).ready(function($){
if (!$("body").is(".et-fb")) {
var fullMenuTop = parseInt($('.et_pb_fullwidth_menu').css('top'), 10);
$('.et_pb_fullwidth_menu').css("margin-top", - fullMenuTop);
}
});
</script>
The following worked for me.
Divi's full width menu module has an inline class named et_pb_row. Set its height to 0px and reduce padding to 0px as well.
If the problem still persists, you probably have stray columns in the row. Look for the class et_pb_column and do the same.
Cheers!
So, I have to build a page in SharePoint, and I have to get rid of some whitespace at the top of the page that is left when I took out a toolbar.
The code causing the problem is:
<div id="s4-ribbonrow" style="height: 126px;">
When I inspect element and change the height to 0px, it looks perfect. However, when I actually go in the CSS and try to change it to 0, it doesn't work. Is there any way to get this to work?
Edit: Whoops, I somehow posted it without posted the code I have.
Inline styles will always take precedence over a rule in your stylesheet. Remove the 'style' attribute from the element and the stylesheet will be used.
I am using the very nice SASS framework, Boubon.io from the great folks a thoughtbot. I'm trying to test out the templates they supply (called Refills), which by-in-large makes Bourbon.io a more flexible drop-in replacement for popular frameworks like Bootstrap.
Mostly this is all very straight forward to set up, but I'm puzzled by the resulting whitespace that appears around the entire nav bar and footer bar that result from simply copy-pasting in these elements from their Refills template.
Here is what I get. Everything appears to be rendering as it appears in the Refills examples, but I'm puzzled by the whitespace surrounding the header and footer boxes. A quick inspection with firebug didn't reveal anything obvious to me, so I'm not sure how to troubleshoot this one.
Apologies for the lack of a more minimal js-fiddle example; but doesn't work when one needs to import these SASS frameworks. Source can be found in this GitHub gh-pages branch repo; since Jekyll on GH-pages compiles the SASS on the fly to render the example; I've just dropped all the underlying bourbon.io, neat, and bitters SASS files in there as well.
The body tag has 8px margin set on it. Get rid of that and you're golden. Make sure you use a CSS reset of some sort. This is something Bootstrap does by default, I can't say for Refills though.
Also, as your footer is display: inline-block you're getting additional margin at the bottom. If you change your footer to display: block then add a clear fix div at the end of it. The blue background should still be the correct height and remove the extra (invisible) margin at the bottom
I've been setting up a very basic Wordpress site. All of the pages have a lot of empty space at the bottom. Pages with more placeholder content have more space at the bottom than the others.
I have been reading other threads from people with similar problems, and I can't fix the problem on my site using suggested fixes (the margin property in a certain div was often the culprit).
Check it out: http://www.hairofthedogproductions.co.nz/?page_id=5
My client wanted a totally minimal bare-bones site so I have collapsed post/page metadata, comments, and the sidebar. I just can't for the life of me get rid of the big empty space at the bottom.
Your main problem is in the comments template. I see you're using visibility: collapse to hide elements, but collapse is just for table elements, and if used in other tags it'll default to hidden. Plus, keep in mind that visibility: hidden hides elements but keeps them in flow. You might want to use display: none instead.
This will solve your problem, try it out.
#comments { display: none; }
Validate your page: http://validator.w3.org
I validated it and found about a dozen errors (some of them potentially serious enough to break the layout of the page, such as an unterminated tag).
When inspecting the source in Chrome, the element in the blank area was the HTML tag itself, which might indicate an overall failure to determine the correct document structure--the parser tries but can't always determine what you want it to do when there are malformed tags.
Just apply overflow:hidden on your main wrapper then it will remove all blank space at the bottom
#main {
overflow: hidden;
}
For some reason, I'm having a problem with these two pages on my website that should have some elements look the same, but for some reason, they look a little bit different.
I have some included asp files which are linked to the same CSS files, so that is why I believe they should be the same. The spacing looks off on the about.asp page though. The index.asp page looks great, however.
Here are the two pages:
http://www.marioplanet.com/index.asp
http://www.marioplanet.com/about.asp
Any ideas as to why these are kind of screwy?
There is extra spacing on the about page, because the spacing gets removed by a style in SlideShow.css on the index page:
* {
margin:0;
padding:0;
}
The above looks like a simplistic implementation of a reset.css style.
Looking at those pages with Chrome's devtools (or Firebug in Firefox) will show that the SlideShow.css in index.asp has a * style in it (that is, every element) to set padding to 0, which makes the padding and margin of your body (and everything else) zero.
This is very bad practice on the part of whoever made SlideShow.css, and is what is mostly screwing up your layout. An css include that is intended to be used modularly (as with a drop-in slideshow) should never use a * style block, because that affects every element in the page. It should have all of its style blocks prefixed with some class to limit its effects to the slideshow module.
Looking at your SlideShow.css, it looks like you may have pasted in some CSS from elsewhere, which is where it may have been introduced. You also shouldn't include <style> tags in external CSS files.
If you remove the SlideShow.css include, your pages should look much more similar. From there, you can edit SlideShow.css to remove the * style and add the include back in, making sure it doesn't screw everything up again, but still lets your slideshow do its thing, or just find a different slideshow module.