for some reason my Blogger page won't let me create transparent space between my footer and the bottom of the page. I would like the footer to moved up (tried both margin and padding, but nothing) so that the background is seen for about 10px but need help with what code to use! Please help, thanks!
Link to blog: http://thewordswecarve.blogspot.ie/
Just add this to your css.
.content-cap-bottom.cap-bottom {
height: 10px;
}
This will make sure this div stays 'open' so you can see the background below it.
In you css sheet add this:
body { margin-bottom: 10px; }
I inspected your page and added this to .content-inner
.content-inner {
margin-bottom:10px;
}
And it seemed to work fine.
Related
this is my site http://www.noor-azmi.com/element/index.html
There is a white space between the navbar and the carousel below
I already tried the
.navbar { margin-bottom: 0; }
but it does not work. It only worked when i changed the carousel to a normal img image.
<div class="banner" img src="....">
pls help thanks
2nd issuei am also facing with my site is when in firefox, when i click to another page "Home" "Company" & "Contact", the browser will auto scroll down and will show the page below the navbar.
In your .fullslider class you have margin-top: 40px;
It'll look like you want it once you remove it.
Please add following css to your style file it will fix your issue
.fullslider {
margin-top: 0px !important;
}
thanks i solved the first issue.
How about the 2nd one. The weird scrolling in firefox, the website will automatically scroll below the nav
I have a dilemma that appreciates and tries any suggestion put forward. I have a localhost running wordpress using the theme The Fox. I have everything running perfectly except for the footer.
I have some pages that the content does not extend a page, while others extend more than a page and the issue I have is that the footer starts exactly where the text ends and I dont want to add white space because of view port dissimilarities. As you can see below, I have a screenshot of a sample page with small content.
I hope you noticed the extra white space after the footer, which is also on the screen taking the footer to the center of the page.
I want the footer to extend to the end of the page no matter the length of the content or the size of the screen.
Inside the CSS, there is a footer section and it is here on Pastebin but I think the most important one is as below;
footer
{
bottom:0px;
right:0;
left:0;
overflow:auto;
padding:0px;
min-height:70px!important;
height:auto;
position: relative;
z-index: 9000;}
In the footer, I am using just a single column and I think this code handles that... also in pastebin.
.footer_1_col .widget_wrap
{
width:100%!important;
float:none!important;
margin-left:auto!important;
margin-right:auto!important;
padding-right:10px!important;
}
And on the footer type, I use type 8, which uses the code;
/**************************************************
Footer Type 8
**************************************************/
.footer_type_8 .widget_wrap {
margin: 10px 0px 0px 0;
}
.footer_type_8 .widget {
margin:0px 0px 0px 0;
}
.footer_type_8 .widget h2 {
font-size:10px;
text-transform:uppercase;
font-weight:900;
letter-spacing:normal;
line-height:14px;
margin-bottom:0px;
padding-left:0px;
position: fixed;
}
.footer_type_8 .widget_line {
display:none;
}
Please what am I doing wrong and where do I need to make changes? If you need to see some other code, please let me know and I will post it on pastebin.
Thanks.
Special thanks to #Firasd for his comments that made this possible.
All I did was to look for the body element using the browser inspector, and then recalculate the size for that element using the already known static height of the header and footer.
This Was Added to the Page's CSS Section
html,body {height:100%;}#fw_c { min-height: calc(100vh - 162px);}
The theme uses Bakerly Visual Composer and I just had to add the above code to the page I want the changes.
Note that if you have a slider, you will need to put that in your calculation too except if your slider is in a row element.
This should be simple, but I can't figure it out:
Here is the site:
I want the logo at the top to be brought down by 20px. I'm using chrome and trying to mod the CSS in the developer tool to figure out what is keeping it stuck to the top, but haven't figured it out yet. I thought the obvious answer would be to increase the padding-top, but nothing moves when I add that in.
Played around with your code. Padding-top works, but on the div that contains your image - class="head-wrap". Just add padding-top:20px; to that element. It worked in developer console for me. Better than adding a margin to the <header> element as you won't reveal the body color.
full css you should be able to use
.head-wrap{
padding-top: 20px;
}
in the site-header add margin-top:20px; The css would be:
.site-header {
background: url(http://www.therunexperience.com/blog/wp-content/uploads/2014/02/TRESimpleWhite_small4.png) no-repeat !important;
margin-top: 20px;
}
EDIT:
Or for padding add:
.head-wrap
{
padding-top: 20px;
}
I'm using wp-supersized to set a full width background that dynamically resizes. http://wordpress.org/extend/plugins/wp-supersized/
Here is what I have implemented: http://www.preview.sharonblance.com/
I have a fixed height header with height of 154px, and I want the top of the image to fill the screen from the bottom of the header, so that the top of the image isn't getting cut off.
I think that the plugin uses the browser full height though and I want to try to change this.
Can anyone suggest how I could do this?
Hopefully it's never too late to answer one of these. My response is inspired by this post, that unfortunately didn't work for me, but let to a solution: https://github.com/buildinternet/supersized/issues/72#issuecomment-6427232
First, you need to add this javascript (I placed it right after the $.supersized call):
$('#supersized li').height($(window).height() - 154);
Then, add some CSS:
#supersized li { top: 154px !important; }
#supersized li img {
width: auto !important;
max-height: 100% !important;
top: 0 !important;
}
Finally, you might want to disable the supersized overlay while debugging:
#supersized_overlay { display: none !important; }
Good luck!
#supersized li for this class add top: 154px; I mean height of the header. hope it will work.
I guess this is already solved but here it is anyway!
find your supersized.css file and edit as follows:
#supersized img {
padding-top:154px;
}
here is the site with the issue
I want the opaque bar which is its own div to appear behind the div with the text. Both of those obviously in front of the image.
My issues are:
1) I can't get the div titled "fp-banner" to shrink to a height of 70px while containing the text inside.
2) The white border keeps extending all the way to the bottom and I have no idea why.
I'm trying to post all of the code here but when I copy and paste it the html actually appears so I guess I won't post it.
Thank you.
Let me address issue #2 first - the white border extends below the featured post image because you have the border applied to the container element (#featured-post) instead of the image itself (#featured-post img)
So change the CSS for #featured-post to:
#featured-post {
float: left;
width: 370px;
margin-left: 10px;
padding:0;
}
and the CSS for #featured-post img to:
#featured-post img {
border: solid 3px #fff;
z-index: -1;
margin:0;
padding: 0;
}
For issue #1, add this to #fp-banner:
height:70px !important ;
and add this to your CSS:
#fp-banner p { line-height:14px ; margin-bottom:8px }
You may need to adjust the margin-bottom value for the #fp-banner p styling to fit in the 70px height.
NOTE: Don't forget to make a backup of your style.css before you make these changes, just in case :)
Hope this helps!
Best,
Cynthia