I'm having issues with my website's footer (theniftynerd.com). I installed a new Weebly theme a couple days. When I installed, everything was fine and looked good. All of a sudden yesterday, my homepage footer appeared broken. It does not span the full 100% width of the screen -it's like it's stuck at the width of the main body. The footer is completely fine on every other page though.
The only edits I made to the new theme were to widen the sidebar of my blog pages using this code:
blog-sidebar { width: 250px; } .column-blog { float: left; width: 235px; margin: 0; padding: 0; }
I also changed the background color of the theme's buttons -literally only changed the hex color value (the site was fine after both of these edits). I don't understand how the homepage footer broke and why the other pages are fine.
Here's what the footer code looks like in the CSS (I only have access to editing the CSS):
/* Footer */
.footer-wrap .container {
padding: 0;
}
.footer-wrap .wsite-footer {
width: 100%;
padding: 40px 20px;
box-sizing: border-box;
}
.footer-wrap td.wsite-multicol-col {
margin-bottom: 25px !important;
}
.footer-wrap td.wsite-multicol-col:last-child {
width: 100% !important;
}
I'm not the most code savvy, so any assistance is greatly appreciated! Thank you
The issue is that there is some unclosed tag in <div class="container"> and because of it the footer gets into this <div class="container"> while it mustn't. So, find a tag inside <div class="container">(the one in <div class="main-wrap">) that has no it's closing pair and the issue will be solved)
Related
I've tried a bunch of ways to remove this margin on the right of the YouTube Livestream page.
I'm doing this for an extension I'm working on and I'd like the margin to be removed completely from page.
I've already done the following:
margin: 0px !important;
It removed the margin on the left side of the page, but there's still a big chunk of margin on the right side and I have no idea how I should remove it.
Any help would be much appreciated.
The other margin spacing is actually on the elements directly inside #columns, which is #primary & #secondary. Overiding those extends width to the window edges.
div#columns {
max-width: 100%!important;
}
div#primary {
margin: 0!important;
padding: 0!important;
}
div#secondary {
padding: 0!important;
}
.html5-video-container video {
width: 100%!important;
height: auto!important;
}
I'm having issues with some padding/margin issues on a site. It's a WP site that I am building for a client - not my original code. I am using a child theme to customize styles.
My staging site is here http://7a9.007.myftpupload.com/
If you scroll to the bottom there is a white margin between the teal section and the gray/blue footer. Additionally there is excessive top padding on the footer that does not exist on the other pages (for example: http://7a9.007.myftpupload.com/services/)
I want both the white margin and the extra top padding on the footer area removed but checking in chrome developer mode shows nothing to target. What am I missing?
Remove the following: margin-bottom: -89px; and top: -149px; it's commented out below, but should give you an idea where to look.
style.css
.home #main-content.trans-header, .page #main-content.trans-header {
/* margin-bottom: -89px; */
}
layout.css
.home #main-content.trans-header, .page #main-content.trans-header, #archive #main-content.trans-header {
position: relative;
/* top: -149px; */
}
#header-wrap {
position: absolute;
background: #29333d;
width: 100%;
}
To reduce the white-space for the both pages, pull the footer up using negative top margin like this:
#footer-widgets {
margin-top: -100px;
}
And then fix the little bit of white-space between the blue tweets div and the footer on this(http://7a9.007.myftpupload.com/) page, left using the above code:
.vc_custom_1492563370829 {
margin-bottom: -50px !important; /*add this*/
border-bottom-width: 0px !important;
background-color: #1c89ab !important;
}
For some reason the footer on one page of my site is not full width. There's a huge white space on the left that I cannot seem to get rid of and its causing my entire footer to be shifted to the right.
This is the current CSS:
#main-footer {
width: 105%;
margin-bottom: -50px;
margin-left: 0;
margin-right: 0;
height: auto;
padding: 50px;
background-color: #2E2E2E;
}
#top-footer {
height: 30px;
background-color: #77CAE9;
margin-left: 0;
width: 105%;
}
I have a feeling it's related to the page width but I can't figure out where to adjust that either. I'll be so grateful if someone can help me out with this!
EDIT: The URL to the page is http://tstand.com/blog
Thanks :)
Angela
Start with moving your <footer> outside of the <div class="container">.
The class .container is used to centre it's content in middle of the screen. See more details here here:
http://getbootstrap.com/css/
A common cause for this can be a default padding or margin of <body> or even <html>. In that case CSS like this should fix it:
body {
margin:0;
}
If the problem persists please post a complete, but minimal example that demonstrates the issue.
I had a jqGrid displaying perfectly ok.
Then I started to develop a basic site layout structure and got into problem: jqGrid's header got really huge! :)
Here's the screenshot.
The structure of the page:
<div id="sidebar1" />
<div id="sidebar2" />
<div id="centralpart">
<div id="jqgrid">....</div>
</div>
And css:
#sidebar1 {
float: left;
width: 150px;
padding: 10px 10px;
}
#sidebar2 {
float: right;
width: 300px;
padding: 10px 10px;
}
#centralpart {
margin: 0 300px 0 150px;
text-align: center;
}
I detected that things broke because of floats: once I remove them jqGrid's header goes back to normal size (although other parts of layout get messed up ;))
Also I noticed that with floats header spans down exactly by amount of height of the right sidebar, so it looks like it tries to float it...
I also tried to clear floats by putting <br style="clear:both" /> before jgGrid, but that shifted it to the bottom of the page beyond sidebars, that's not what I want.
I'm only taking my first steps to css/html/jqgrid, so I can miss something really obvious :-)
First of all it seems to me you have to fix margin value of #centralpart to the following
#centralpart {
margin: 0px 320px 0px 170px;
text-align: center;
background-color:red
}
To solve your main problem you should set height of the titelbar div div.ui-jqgrid-titlebar explicitly:
div.ui-jqgrid-titlebar {
height: 16px;
}
Like you can see on the demo the results will be much better after the changes. (I included background-color in every div to see more clear the size of every div.
I currently have an html setup that looks like:
<section class="topBar">The site's permanent top bar</section>
<header class="body">Some header info here</header>
And a CSS setup like:
.body { clear: both; margin: 0 auto; width: 600px; }
header {
height: 46px;
margin: 30px auto 20px auto;
}
.topBar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}
The goal is to have topBar stay at the top of the page, and the header and all after it scroll below it.
That for the most part works fine. The problem is though that header's top margin is ignored as long as topBar has position:fixed (So when the page loads, header is pretty much hidden below topBar).
I've tried changing header from margin-top to top and that doesn't help either.
How do I fix margin-top being ignored?
Here is actually a bug report on it with a test page to show the problem:
Bug report: http://www.quirksmode.org/bugreports/archives/2007/03/ie7_positionfixed_and_margin_top_bug.html
Test page: http://feragnoli.com/ie7/
add padding-top:250px to the body tag, and remove the margin-top from the .lower div
Put the SECTION.topBar under the HEADER.body:
<header class="body">Some header info here</header>
<section class="topBar">The site's permanent top bar</section>
since the SECTION.topBar has been fixed position, so the order in the document should not be quite that important...
I just met the same problem yesterday, so the solution above is what i do in my development, since this is a question asked long time before, so it you have a good solution found already, just tell me how please!