I'm building a Wordpress site and there is a space between the last content section and the footer (site: http://www.imprero.com/wordpress/graffitx). I inspected the code and reviewed the potential paddings but couldn't figure out where is this space coming from.
In your last mk-main-wrapper-holder -> theme-page-wrapper -> theme-content class you have an empty p tag with margin bottom of 20px. Removing that style or the empty p tag should solve your issue.
You seem to be using a content builder to make your updates easier. Although this is a good, easy-to-use approach, this adds a lot of unwanted pieces of code in your site, which takes your loading time up several seconds.
Anyway, it seems to be caused by a section you added without content. So, check the content you added in your page via WordPress admin and see if you can find any empty content sections in your Content Builder. Preferably, use the "Text" instead of the "Visual" tab if nothing is showing up via your Content Builder visual options.
I think this piece of CSS code is a good workaround, although not the best option (which would be removing the empty section in Content Builder):
#theme-page .mk-main-wrapper-holder:last-of-type .theme-page-wrapper .theme-content p {
display: none;
}
Hope this helps you. :)
Related
I have a problem showing my page visually the same on FireFox and Chrome.
Page renders correctly with Chrome (showing icons in two lines), but in Firefox icons break visually and create a third row. I think that the problem is with Bootstrap, but I don't understand why. I have tried different solutions, but nothing.
The page with this problem:
Link of the page: http://www.unishare.it/sedi/1
You have a lot of things going on in your HTML. Firstly, you shouldn't write any code outside of the scope. You should place your custom style elements always inside of the tag. Secondly, move bootstrap.css to the top. That is your css boilerplate (That is the css code that resets your visual settings across all browsers). All the other css files (font-awesome.css, slider.css, etc...) should be placed after the boilerplate css code/file.
After placing all library css files, your custom css files should be the last ones in the tag (I mean all the style codes at the top of your html page).
Try these suggestions and come back with the result. I believe you'll be good to go then.
EDIT: After taking a second look and playing your HTML with FireFox's dev tools, I created a solution for you. Just surround your "portfolio-boxes" divs with a row. They are not actually recognized as a seperate row in your DOM, that's why they don't appear in two seperate lines.
In short, you should create a div with a class of "row" for every "portfolio-boxes" div, seperately.
Does that solve your problem? If yes, you can vote up and select the answer ;)
I have basic coding experience. In my Wordpress install, some of my pages have a blank whitespace under the footer because there is not enough content to push it to the bottom of the monitor at higher resolutions. The problem is persistent on chrome, Firefox, IE etc. I would like to fix this so that:
If the content is shorter than the browser resolution, the "body" will fill the page until the footer is at bottom of the screen with no blank whitespaces after or before it.
No matter what the browser resolution is there will be no whitespaces after the footer, so im trying to refrain from code that will use a determined "px" number.
I want the footer to be displayed in a traditional 'bottom' of the page way and NOT a sticky footer that always remains at the bottom of the screen no matter how far you scroll.
As I am working in Wordpress I have access to custom CSS and source theme files, however, I would prefer to solve this problem with custom CSS and an answer that acknowledges a Wordpress specific fix. I have tried several solutions but to no avail. I have been suggested to use Ryan Fiat's "Sticky Footer" solution but I'm unsure of how I would incorporate that into my Wordpress as it uses PHP and I mainly edit with custom CSS.
Heres a Fiddle of my footer PHP.
Q. Please provide me with a clear and direct solution for Wordpress that will make sure there are no whitespaces below the footers on my site when the content is shorter than the browser.
You can find an example of the whitespaces on my website here
Solutions i've tried:
#footer {overflow: hidden;} in the custom CSS didn't work.
Putting html, body, parentDiv, childDiv, section, footer { height : 100%; } in my custom css but that didn't work.
#copyright { padding-bottom: 20px;} "#copyright" is under the footer so this did reduce the whitespace to a point where it seemed it weren't present, but on taller browser windows the white space reappeared.
"div-wrapper, body" solutions like Ryan Fiat's seem to have positive responses but again I cant find a Wordpress specific one.
Answer from those that have experience with Wordpress are greatly appreciated.
I don't think there's a good pure CSS fix that isn't hacky in some way without changing how your page works (sticky footer or something).
Here are two options:
Use javascript to determine the height of the window, subtract the height of the footer, and force the content section to have a minimum of that height. You would also need to run this same function when the window is resized. This isn't a great solution.
What I would recommend is to just add the CSS rule body {background: #222} to make the body the same background as the footer. This way, if they content doesn't fill the whole window it just looks like the footer fills the empty space instead of white.
In reference to my testing site's page:
http://thepfjstudios.com.au/testing/content/NewAbout.php
I have a Spry menu on the left side, that when is being used, seems to kill the <p> tags in the content section on the right side.
The .css file used is:
http://thepfjstudios.com.au/testing/SpryAssets/SpryMenuBarVertical.css
and the .js file is in the same folder but is SpryMenuBar.js
I've been playing with this for 2 days now and can't figure out why there is no longer a space between paragraphs in the content section on the right side. If I don't use the Spry menu, the content section shows just fine.
I would post code here but all 3 pages are relevant to this question and would take up a very large space.
SpryMenuBarVertical.css on 12 line defines:
* { margin:0; padding:0}
margin:0 is affecting your paragraphs. I suggest that you delete that line and adjust the menu's styles to suit your needs.
Edit: I think I should tell you how I figured it out in case you encounter a similar problem in the future. Here are steps for Google Chrome, and it should be similar in other browsers.
Right click on the affected element (in this case, any of the paragraphs).
Select Inspect Element.
Under the Styles tab, you can see all styles that do or would apply to the element. Try unchecking some of them to see what they do.
Under the Computed tab, you can see what styles the element is using.
I have tried removing the title by all the methods I could find on Stackoverflow and wordpress support such as pacing a css rule and finding the get_title in the page, single and template php files. But this title doesn't seem to want to go away.
The only way I have had any success is by using a plugin that removes the title but then I am faced with the problem that the spacing remains where the title once was.
Here is a picture showing what I mean: http://i.imgur.com/vj0vbc7.jpg
Thanks in advance for your help!
You need to go into your template file and remove where the title is being outputted.
I checked the source code on your site and it looks like the theme files are not in the regular place. So do this. Go to your FTP client and open up:
/assets/956/themes/header.php
It might be named something slightly different.
Now within that theme locate your h1 tag. At this point I would recommend removing it, saving it, and making sure you have the desired change. It should be gone completely from the page. If it's not, perhaps the H1 tag is located in another file? Check other template files till you find the right one.
You can remove it all together or surround it in a div with ID='homepg-h1' Then just do a rule like this in your CSS:
#homepg-h1 {
display:none;
}
Hope that helps, let me know if you have any questions.
If you go to "Game rules" section and click around the sections "Backgammon, Narde, Nackgammon, Tavla, Old English" you will see that some sections load normally and the scrollbar works fine. Bigger sections like Backgammon and Narde do not load fully. The content in backgammon section is going out of the margin and the Narde section simply won't load fully.
What could be the issue here? All of the sections with scrollbar have the same identical settings. The only difference is that Backgammon and Narde sections have more text and more images. Could this be a reason for the glitch? Maybe the plugin somehow doesn't get to load all the content and already locks itself in place? What could be the possible solutions?
EDIT: I'm pretty sure it has something to do with tinyscrollbar plugin loading a bit too fast (before the inside content has loaded). What method could I use to put a timer on the plugin so it doesn't load as quickly or refreshes?
first it seems that your "p" elements styles do not have width set to it and when rendered they hide behind the scroll bar making some of the text not visible.
This may not answer you question directly but it may have something to do with portions of text being hidden by overflow:hidden / overflow:scroll that is being used for the scroll bar.
You could also try using the jScrollPage plug in as it simplifies the scroll bar coding.