I have a Wordpress site. I'm using the Blank Slate plugin on top an installed Nirvana theme by Cryout Creations. I'm using it to create my homepage from scratch and will eventually switch to a blank theme altogether.
My issue is that have a 32px gap between my footer and the bottom of the page (I measured it). I have trawled online for the last week and tried every single solution I have seen to remove it (wrapping, negative margins, 100% body height etc. etc.), yet absolutely nothing has been able to remove this gap, and place my footer at the bottom of the page.
Rather than paste my code, I thought I'd ask if anyone is aware of Wordpress itself causing such an issue, or perhaps whether a plugin is capable of doing so? If so, is there a way I can identify the cause?
Link to site: https://nelsontrails.co.nz/8937-2/
Thanks in advance for any help, it would greatly appreciated!
You have margin bottom on article.page. Please copy the below code and paste it to Customizer -> Additional Css to get rid of that space.
article.post, article.page {
margin-bottom: 0px !important;
}
you got margin-bottom: 36px; in your article.post, article.page class in your css please remove it and the white space will be gone
Related
So an old friend of mine who knows nothing about programming asked for help with his site. someone has built it for him long ago, here it is - http://challengetours.org/
The problem is with the site's width.
As you can see there is a scroll bar at the bottom of the site, which leads to a huge empty space.
There is no problem with that in particular, but when you open the site on mobile it's zoomed-out to see the whole site including the empty area.
what would be the easiest way to solve this ? I have some background but I've never used WP/JS/PHP/CSS :)
Thanks,
Itai
If WebElaine's comment above doesn't work, you can do the following.
You have two elements setting rules in the CSS:
Your div with id ___plusone_0 has an inline style set to "left: -10000px;".
Your iframe with the id st_gdpr_iframe has an inline style rule of "left: -5000px;".
Removing these two styles gets rid of the scrollbar.
If you are using Wordpress but aren't too familiar with it, you can add your own CSS IDs allowing you to target these elements and override the inline styles if there's an issue with the Wordpress theme itself that you can't otherwise access.
For example:
#st_gdpr_iframe{
left: 0px;
}
#smthemes_share .inner{
left: 0px;
}
I made a wordpress site using the responsive theme "hueman".
For the integration of the content I used the plugin "pixgridder" (don`t know if that is relevant)
For testing the site an all devices I use this tool: quirktools.com/screenfly
My site is: http://www.traumbad-muenchen.de
When testing the site http://traumbad-muenchen.de/portfolio/ in the mentioned tool above I can see that for apple I phone 5 the content is cut off on the left side while the page titel is displayed correctly.
I tried to find out the problem with firebug and so on but can`t find a way to make the content appeare like the page titel does that means not do be cut off.
I tried to play around with different settings redarding padding and margin but whenever I do this the content is mooved to the middle also on the desktop versions so that these versions look stupid.
What I want to achieve is that the edge of the content always starts exactly where the edge of the page titel does. I don`t have any problem displaying the page title.
Would be so thankful if anybody could help me.
Thanks a lot in advance
The problem occurs because there is no padding.
You can overcome this problem by adding a padding-left in your responsive.css on line 171.
Change:
.entry { font-size: 15px; }
to
.entry { font-size: 15px; padding-left:10px;}
In my case, I had to add padding to the span settings. One easy solution would be to load the website on a 'website responsive testing' site and then try to solve your issue by using the 'inspect element' on your browser.
I have gone thru the site and searched for the last two hours and am trying to get a wordpress site to work correctly. Everything is working except the white box that holds the content will not go to the bottom no matter what I try. I have tried all the options here but I think it may be that I do not understand enough about css or the divs are all messed up from the template. Can someone please help out with what I have crossed. My page is located at http://craftedimages.com/AA/aae-events/ and you will see the white box on the right that does not extend down. I got this template and have been modifying it of which there were already lots of problems. Thanks for your time ahead of time.
Try adding
#page{
height:1035px;
}
..to the css - the sidebar is this height and although it is auto that is the given height
Hope this helps
Using chrome inspect element. I can see that your <div id="wrapper"></div> has the style
height:auto;
set it to
height:100%;
That should fix it. Only do that for this page. The other pages are set to auto because it forms to their content. This page doesn't have enough content to reach the bottom like the rest of the pages.
new to the forum here-
I developed the Wordpress theme that I want to use for my blog- and it looks good on the test site: http://flashandshine.com/eyesofstyletheme/
But when I upload it to my blog: http://eyesofstyle.com/
the nav menu doesn't have the background color, isn't static, and isn't at the top. When you click a post and view a post page, the sidebar is right where I want it. I'm confused as to why it's pushed to the botom on the home blog page.
I was hoping to change this theme around and sell it as a template, but I can't have it moving the sidebars to the bottom! Can anyone help me out with this? I really appreciate it!
If you are looking to sell this, it will need some major overhauling.
Looking at the CSS, you have some very extreme oddities. The main one being that you are using margins to determine the spacing from the sides instead of making a main container which sets the width.
To get it looking sort of alright, change the #blogcontent to show this:
#blogcontent {
margin-right: 0px;
margin-left: 17%;
max-width: 40%;
float: left;
}
Overall though, you will want to change things around a great deal.
This is how you should really want your layout to be using a proper grid layout. Click here.
Its all stuff you pickup along the way though. Hopefully this helps push you in the right direction though.
First of all, let me say that I am not a professional coder - I've done every change on my site bit by bit and I'm not sure I really get how I made some things work.
That said, I had posted what seemed to me two simple questions (for people who actually know what they are doing on the Wordpress forums and received nothing but a smart#ss remark that I needed to learn CSS. Anyway....
ONE I have changed the overall fonts on the site but I can't seem to get the body of a post - and it alone to change to a better font for reading. I have set up League Gothic as my main header, sidebar, homepage fonts but I need to change the font in the body of the post itself to something a little easier on the eyes. And every combination I try changes ALL the fonts or doesn't work at all. ANY good advice?
TWO I have image/text just below the banner on my site. There are two small icons on each side of the "navigation bar" I want all to be horizontally/vertically aligned but the two icons on each side appear just a little above the first line of text - and this shoves the bottom row of text onto the background image.
CAn anyone please tell me what I'm missing?
The site is thirdrailers.com
Thank you so very much...
(ALSO, There are other additions I will be making down the road - if anyone can refer a coder/designer I would be very grateful.)
1) You want to change the font for: #post-content p and also .recent-postwrap p, .main-postwrap p. This will change the interior pages and the home page, respectively. You can add: font-family: Arial or whatever fonts you'd like to use.
2) Quick fix, though not the best. On the images, add style that says for the left image: float: left; margin: 15px -20px 0 20px; -- adjust those numbers accordingly. On the right image, just change it to float: right; margin: 15px 20px 0 -20px;.
Hope that works for you.