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!
Related
Halfway down this page is the "our team" section using the Wordpress plugin Huge-IT Portfolio: http://dev.doubleaevents.com/ . When I resize my browser to smaller sizes, each image rearranges but the div is not centered. I've tried auto left and right margins, and setting max widths, which seems to work when I inspect the element... but when I make the same changes in my style sheet I can't seem to get the whole div centered!
Ideas?
EDIT
Try adding this:
#media(max-width: 769px){#huge_it_portfolio_container_1{
margin: 0 30% !important;
}}
Clear your browser cache and reload maybe it'll solve the problem.
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.
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;
}
}
This is a problem with a theme that I bought, and I have already tried to contact the owner (with no luck).
It should be a fairly easy fix, it's just that I can't work out how to do it! (I have done my research).
You can view the theme here: http://igeekify.com/_templates/liftoff/www/
To re-create the problem, just drag the window size so that it is smaller in width than the content, then scroll to the right. You will notice the header background doesn't stretch all the way.
The background image is for the DIV '#frame-header', which has the class '.wrapper'. I believe that the problem has something to do with the width of '.wrapper' which is defined.
Any help is really appreciated!
I think you might need to add a min-width property to the 'frame-header' div:
<style type="text/css">
#frame-header
{
min-width: 940px;
}
</style>
Try using the following code:
image width:100%;
I'm still relatively new to css positioning, but have read a few books and watched a few tutorials. I made some palettes over at colourLovers, and wanted to see how they would look when applied to a website as a color scheme. So, using the little coding knowledge I had, I created a page to demonstrate my color scheme. After a while, it became a sort of self-confidence boost, and I've gotten just about done with it when a little thing caught my attention.
I have a two-column layout - on the left, there is the navigation menu, with a header above and a content section to the right, all in their own divs. My question is this - when I scale the page (as in, make the window for viewing it smaller), the content section gets pushed so it wraps under the Div. The way I could fix this was to make an additional div with no bg color and make it as long as the content that contained the navigation div, so they would line up, but it doesn't fix it if you resize the window.
I'm sure there's an easy fix to this, but my limited knowledge doesn't yet know it. If it helps, I've attached an image file below of what the site looks like in my editor (Coda). I also provide a link to the code of that page of my site which I've uploaded to textsnip. You can find it here - http://textsnip.com/f434fd. I have added comments to mark the header, sidebar, and content sections as well. Any help would be greatly appreciated. Thanks in advance!
The easiest solution is to use min-wdith on your container:
<div style="width: 90%; padding: 10px; margin:0 auto; min-width: 400px;">
This won't work on IE6, but will work on everything else. And, if you need IE6, then there are several workarounds that will solve it.
I would suggest you to use % value instead of px.
For example:
Header: 100%;
Nav: 20%;
Content: 80%;
Footer: 100%;
This way, if someone rize the window, it will always display perfect.
Use "float: right" on content DIV. And replace px width with %.
Check out this
You can use CSS Media Queries to adjust things as they get bigger and smaller. For instance, if you wrap your entire page with a div with an ID of wrapper (and use Simon Arnold's solution for the width of the individual elements), then you can do this:
#media (min-width:1200px) {
#wrapper {
width:1100px;
}
}
#media (max-width:1200px) {
#wrapper {
width:90%;
}
}
These set your wrapper to 90% if the screen size is less than 1200px, and 1100px if your screen is bigger than 1200px. Thus, if the browser is wider than 1200px then your page will stay the same size, and if it's smaller then it'll flow nicely.
#media (max-width:700px) {
#wrapper {
width:100%;
}
}
That one makes it wider when the browser gets smaller, and
#media (max-width:400px) {
#wrapper {
width:400px;
}
}
that one sets it to a fixed width when the browser gets really small. Those are really simple queries, if you're interested in learning more about media queries then here's a good place: http://css-tricks.com/6731-css-media-queries/
And of course, it wouldn't hurt to make the page flow between those transitions using CSS3 Transitions.
IE8 and below, unfortunately, do not support media queries. BUT you could read their browser type with PHP instead, and direct them to get a decent browser... It'd help make the web better. ;)