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;
}
}
Related
I've made my own static website from scratch using html5 and css(3) only.But I have got 2 issues.
The first one is the white space between the top's menu and header's image bottom.I've tried everything.
Maybe the only solution for that is float:left; but then the image goes into the navigation tag or negative value on margin's property but I've heard that this technique is bad.
The second issue I'll display via image http://www.filedropper.com/discoversite that's my simple WebSite. I know my css is awful but I'm still a beginner. The second issue is here. http://postimg.org/image/5adp6379d/ . As you can see the text is going out of the box. (I am using % in css for more responsive). I will be glad if anyone can help me.
I can only have a guess for your first issue as I don't know the exact code for your website (create jsfiddle :D ). Try to apply vertical-align: bottom; or display: block; to your header image. Why? Because images are placed like text and some letters like g, j, q and p are going underneath the bottom level. Your browser will leave a tiny space for these letters. Also setting a min-width is a good solution like Kirk Logan said.
And for your second problem there are multiple solutions (depending on what you want):
You can handle your content with overflow: hidden; or overflow: scroll as Kirk Logan suggested. But this wouldn't make any sense in the case you have shown us in the picture.
Or (is a little more complex) you could remove the white borders on the left and right side (just when the screen is too small) in order to gain more space for the text. This can be done by:
#media only screen and (max-width: 768px) {
#BigBorder1 { border-width: 0px; }
#BigBorder2 { border-width: 0px; }
}
Everthing inside the outer brackets will only be applied when the screen's width is smaller than 768px. But to be honest this is usually done the other way round: When the screen is bigger than 768px then something happens. This simplification is only in order to make it easier for you.
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!
I just noticed today that my site is suddenly not filling the width of the screen.
[link removed]
If you scroll to the right, you will see dead space from the top to the bottom. I have tried adjusting the screen resolution, and double checking all css rules pertaining to page max-width, but I can't seem to find what is causing the issue.
How can I get my main container to fill the width of the page?
Try adding this to your css, this should force your view to 100% while disabling horizontal scrolling.
html, body {
max-width: 100%;
overflow-x: hidden;
}
edit:
this worked in my web-inspector but I had to add !important to both settings. It looks like bootstrap is overriding your stylesheets. It's hard for me to tell because I am on my iMac and don't have access to my PC right now. Good Luck!
On this site:
http://stmc.modulemedia.co.uk/HossIntropia
I have code that's generated by a CMS, I have stripped things back as much as possible, removing the .net code and things generated by the CMS, but still cannot see why the text (that starts Hoss Intropia...) is overlapping.
There are basically two DIVS LeftCol and RightCol, that I have moved from being side-by-side to LeftCol being above RightCol.
This is a project I'm taking over, so I'm limited as to what can be changed.
Thanks for your help!
I think you just need to increase the height of the div inside #LeftCol that is containing stuff.
Try changing the height on .menu to height: 480px. Or perhaps even remove the height.
div.Menu has a height property, and since the content is spilling out beyond that height, it overlaps the div#RightCol content.
if you remove the height from div.Menu, it works
settting the margin of the right cols should solve the problem:
#RightCol {
margin:120px 0 0 0 !important;
}
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.