On this site, if you view in under 1024px wide screen (ideally use Chrome's mobile viewer for iPhone 5 or 6), there is white space on the right side of the footer and I can't figure out how to get rid of it (i.e make the green fill up the full space), without screwing up stuff above it.
Any ideas on which CSS can be altered/added to fix this would be super appreciated.
That's the scrollbar's silhouette. Your content's overflowing the footer:
Adding the following will remedy the issue:
.t3-wrapper { overflow-y:hidden; }
You have a rule on the body tag for overflow-x:hidden !important -- all you need to do is put the same rule on the html tag. Like so:
html,body{width:100%;overflow-x:hidden !important;}
Cheers!
Related
Here is the relevant jsFiddle with full code sample.
I am trying to:
Change the color of the footer's <hr/>, however my styling rule doesn't seem to work; and
Figure out why, if you break the page out into a fullscreen, the page appears too wide and the browser presents you with a horizontal scrollbar
My CSS rule to color the <hr/> is:
hr {
color: rgb(255,0,0);
}
And as for why the page is too wide, I'm totally out of ideas. Any idea as to why my attempts here aren't working?
The hr tag use the property border to set the line ... if you need to change that color then use:
border-top-color
Try this:
footer hr {
border-top-color:blue;
}
The DemoFiddle
And the scroll bar on the page is because you are breaking the layout with the absolute position on the footer. http://jsfiddle.net/7j9q1ye4/2/
The HR will go over the whole Div so it depends how big the div is,
if the width of the div where the HR is within is over the whole page wide that the HR will do the same. It has probably something to do with the DIV where the HR is standing in.
Not sure how to best ask my question. And I can't yet post screenshots. :( This issue does happen in mere current coding practices. You can currently even see this issue happening on Facebooks home page.
Here's my URL:
www.alpacanation.com
How to replicate live
Grab the right hand side of your browser and pull inwards. Eventually a scroll bar appears. Not necessarily bad. As I have a fixed with here. However… Notice the scrollbar is the length of the background color up in the top of my header which is actually creating a "Curtain" like effect.
Make matters worse:
If on other high level parent elements like .Footer or .Page you play around with overflow and position relative the curtain will then begin overlaying on top of the entire site.
Check out Facebook: They often have this issue as well. Obviously most don't notice it as it's not going over top of the content.
In either case I know there is something not right.
Help appreciated!
Add something like this to your CSS:
body { min-width: 980px; }
You have min-width: 980px; set in many of the elements on your page, but not on html, body, or .container. Once the viewport is smaller than this, these elements will overflow html and give you the scrollbars you're seeing.
But this doesn't make html any bigger. It--and its background--is still at the viewport size. This is why you get the "curtain" effect when you scroll.
Setting width: 100% on html doesn't fix this; this only sets html to 100% width of the browser window. If you're going to use min-width, make sure you you don't just apply it to elements that hold your content, but also those that have your backgrounds.
to fix this, add
html, body {
min-width: 980px
}
in your www.alpacanation.com/styles.css:40, then you are done. :)
EXPLANATION: the problem is this container,
<!— stat container —>
<div class=“container”>
<!— START FOOTER MENU SECTION —>
that container has width:980px which screws up the view because it forces that container to stay at 980px wide while the rest is shrinking, thus creates the ‘curtain’ like effect.
Made a Wordpress installation, styled a blog.
The Blog
The problem:
I have a fixed footer and a scrollable main page. No matter what I seem to do, there's always a space from like 10px between the footer and the main body.
I've inspected with Firebug, went through the CSS and the html. I gave the main div margin and padding and even a border-bottom.. but does not seem to help. It changes something, but the space still remains.
Of course, I could set the padding from the footer to bottom 10px, but then I would have unwanted space beneath the footer.
I can't really post any code here, since this is Wordpress and I honestly wouldn't know what code you could need, since I don't know where the problem is.
Thanks everyone in advance!
It's the margin bottom on element
<div id="page" class="hfeed site">
from this style:
body .site {
margin-bottom: 3.42857rem;
}
Removing this style gets rid of the space (and as far as I can see doesn't cause any other display issue with the site.
You can find these kind of issues by using the Developer Tools in your browser (the Firebug plugin for Firefox for example) and just right-clicking on the area with the issue and exploring and dynamically editing or disabling the styles that are applied to an element.
Well if you really want to remove the gap between the body and the footer, Just get the rid of height:40px that you've set in the footer CSS.
This is only i can do without code!
Hope this will help.
Here is the screen-shot
Just remove the height:40px rule from style.css (row 771)
on your style.css line 121 add this table { float: left; }
I created a WordPresss theme on my blog - http://misstravelgirl.com/
The issue is that when you shrink the browser to about 1060 pixels width or less, you see a big white space on the right side next to the brown box. I am aware that it's the padding in the #palette div that is causing it because when I set the padding to 0, it fixes the problem. However, I still want the padding for the text. So, how can I fix the problem by removing the white space without adjusting the padding?
Without any code examples, my help is limited. However, I'd suggest setting the width of the problem div to 100% so that no matter the size of the browser window, it will always fill it. I try to do most of my widths and heights in percentages for this exact reason.
You could also try something like overflow-x: hidden;
It would be better if you could post the code you think is the issue.
Why not try adding padding to your #content div instead of your #palette div and use a media query?
#media only screen and (max-width : 1060px) {
#content {
padding: 20px;
}
}
Basically i'm trying to get a divider to run to the right edge of the screen (without overflow).
If you look here: http://gomysites.com and scroll down to the twitter section you will see i've set the twitter panel to run off to the left edge of the screen (no matter the size).
Now i want to do exactly the same on the right side. If you notice the grey divider between the blog posts id like this to run to the right edge of the screen (no matter the size) without it adding a horizontal scroller.
I've tried setting the css for the divider exactly opposite as i did for the titter panel:
.widget_gomy_news .divider{
margin:30px -10000px 30px 0;
background:#f3f3f3;
height:30px;
float:right;
width:610px;
padding:0 10000px 0 0;
}
But it adds a horizontal scroller. So i did try adding overflow:hidden; to the body. Which removes the scroller but i can still scroll everything left and right with the mouse.
Anyone got any ideas how i can achieve what i'm after? or will i need to use some js to make this work?
Thanks in advance.
Just remove the -10000px right margin and the 10000px right padding and it works. What do you need that for?
Use overflow-x: hidden on the body element. This will prevent the horizontal scroll but may trip you up in older versions of IE - Tested in IE8 and Chrome.
Edit:
You could also write some jQuery to grab the Window viewport height/width like: $(window).height();, and size your entire page's "container" div accordingly. This will allow you to know what numbers you're working with for setting the negative/position margins in your "divider" hack.
I think i've sorted it. I wrapped all the page content inside a div and added overflow hidden to that (rather than body). This worked in everything except IE7, but i can do a simple work around for IE7. Thanks for all the replies, Jeff sent me down the right path thanks.