I am beginner in wordpress development, I am making a website for a company there is one issue is that when I add footer then creating space between above div and footer div This is webpage link where issue is that
Check my image below.
http://prntscr.com/m2i33y
You have to remove padding on this css property.
.page-wrap, .content-wrapper, .content-area .hentry:first-child{
padding-bottom:0px !important;
}
.entry-footer{
margin-top:0px !important;
}
Related
Demo of slide menu in the top left of the page:
https://cuppalabs.github.io/cuppa-ng2-slidemenu/
Using the Google Tools I have been able to change the margin-top of the menu, but I've had no luck doing the same with my own copy.
My best attempt:
cuppa-slide-menu span div .menu-container .cuppa-menu .show-menu,
cuppa-slide-menu span div .menu-container .cuppa-menu .hide-menu {
margin-top: 134px !important;
}
I have also been unable to locate the css file located at src="/path/to/angularjs/angular.min.js"
Regarding the icon sizes, I was unable to do it even on Google Chrome.
Any advice would be much appreciated.
There is not a css file as such, the styles are included in the js files, I have been able to change the margin of the menu by writing the following in my stylesheet:
.cuppa-menu-overlay, .menu-container[_ngcontent-c3]{
margin-top: 150px !important;
}
And the result is
I hope I have helped, greetings
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 am trying to tweak a wordpress site but can't seem to get one of my parent div's backgrounds to be visible through the child divs on top. I've got the background image set for #main. The image I'm using fades to white at the bottom but, in the rendered page, I can only see about the top 23 pixels or so before the rest is blocked...I think by #primary.
The site uses a child theme based on Responsive and can currently be viewed here. I would copy/paste code for your convenience but I'm no longer certain what part of the code is responsible for what I'm (not) seeing. So I apologize in advance if this is not enough information to go on :-/
Looks to me like you have a float problem and the div#main is collapsing. Try one of the various clear-float techniques to prevent that.
For example, try #main { overflow: hidden } as a test - that will normally prevent the collapse.
Classic clear fix issue. Give #main an overflow:hidden or try the micro clear fix if any content is spilling out of the box.
#main {
background: url("http://wp.massosteopathic.org/wp-content/uploads/2013/02/headerhand-contd.jpg") no-repeat scroll 0 0 transparent;
clear: both;
overflow: hidden;
padding: 1.625em 0 0;
z-index: 1;
}
The #main div is only 24px high. This is because all child divs are floating.
add a
<div class='clear'>
with
.clear { clear: both}
just before the closing tag of your #main
I'm using Twitter bootstrap with a template I purchased. I had to do a bit of work to get the footer to appear and look acceptable, but now it is always too low.
What I mean is, white space will always be added so that the footer is below the bottom of the screen - you always have to scroll down to see it.
Here's a link to the site. You only need to look at the homepage to see the problem.
If you want to remove the extra white spacing that is causing your page to grow more then it should, just remove:
body {
padding-bottom: 40px;
padding-top: 60px;
}
#wrap {
min-height: 100%;
}
html, body {
height: 100%;
}
If what you are trying to achiev with the footer, is to allways stick it on the bottom of the page you should follow a technique called sticky footer something like this
The problem seems to be that you have the #wrap element set to 'min-height: 100%;'. If you are ok with the footer just being at the bottom of the content rather than the bottom of the page then removing that should be an easy fix.
UPDATE: I have tried the suggestions below, but I'm still facing the same problem. I've edited the code below to reflect the new stylesheet. If it helps, the page in question is http://japanesenostalgiccar.com/2011/05/06/friday-video-nissan-cedrics-vs-s30-fairlady-z/
In my wordpress blog I'm trying to create a stylesheet where an image or embedded youtube video is 640px wide, while the text beneath it is only 600px wide.
The wordpress-generated HTML looks like this:
<div class="entry-content">
<p>
<a href="uploads/2011/05/ball.jpg">
<img class="alignnone size-large wp-image-15139" width="640" height="211"
src="uploads/2011/05/ball.jpg" title="Ball" />
</a>
This is a baseball.
</p>
</div>
My external CSS file has the following:
.entry-content p{
overflow: visible !important;
padding : 0px 20px 0px 20px;
}
.entry-content p .alignnone, iframe{
overflow: visible !important;
width : 640px !important;
padding : 0px !important;
}
img.alignnone.size-large{
overflow: visible !important;
width: 640px !important;
padding : 0px !important;
}
However, the image (and the text) always displays at 600px, while the embedded youtube videos (using the iframe tag) display at 640px.
Thinking it was a specificity issue, I even added
style="width: 640px;"
as an IMG attribute, but no dice. Thanks in advance.
Based on your updates, I looked at the page in question. I think I might have an answer for you.
Check out the styles that your theme "TwentyTen" is inserting starting at line 778:
/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img {
max-width: 100%; /* When images are too wide for containing element, force them to fit. */
height: auto; /* Override height to match resized width for correct aspect ratio. */
}
The 'max-width: 100%;' line seems to be the issue. Using Firebug, I just turned that style off for a second and the picture of the Nissan snapped out to be full-width. So to solve it, you should be able to add this to your own stylesheet:
max-width: none;
I hope this helps!!
You have another class on the image of "size-large" - did you check to see what that style is doing to the image? Does that style possibly have a "!important" declaration in it?
I don't know what the other classes on your img are doing, but maybe you could try something like this:
img.alignnone.size-large {width: 640px !important;}
simple:
.entry-content p .alignnone, iframe{
width : 640px;
}
this will take the child element of p, and set it at 640px;
However, you might need to set the
.entry-content p{
overflow-x:visible
}
The image is only 600px wide because of the padding on the paragraph tag.
If you want to display the image and the iframe at 640px, you can add the following:
to the image:
img {
margin: 0 -20px;
display: block;
}
to the iframe:
iframe {
margin: 0 -20px;
}
Did you try separating the div's i.e. tags for the text beneath & that contains the image/video ?
Keep the container that holds (iframe & text) consistent.
Separating the divs for inner elements of the container is a better option.