On my current project I am in the process of building tablet and mobile versions of the site and am testing it within the browser at the different sizes, though I am coming across a problem when resizing the browser.
The current version of the site can be found at: http://beta.residencyradio.com
Basically whenever I resize the browser to check how it will look on the tablet for example, white space is rendered to the right and the x scrollbar appears, even though the width of the containing element has not been exceeded.
I can pretty much solve the issue by adding overflow: hidden but this disables x scrolling completely, which I don't want.
I have tested this across all major browsers, all respond the same, so it must be to do with the CSS, what exactly I'm not too sure, but it's probably something very simple that I've managed to miss.
Any help would be greatly appreciated!
Thanks in advance, Michael
That whitespace is being created because your #second div is being pushed outside the boundaries of the viewport. Instead of pushing that div using margin-left, use position:absolute; in its place to fix that issue.
This is how it is now:
#second .content {
margin-left: 22.8125em;
}
The .content div has a width of 60em as it is.
You can use something like this instead and it should work fine:
#second .content {
left: 170px; /* adjust to your liking */
position: absolute;
width: auto;
}
I think....
change in your css file:
from:
html {
font-size: 16px;
overflow-y: scroll;
background: url("../images/bkgMAIN.jpg") repeat-y;
}
to
html {
font-size: 16px;
overflow-y: scroll;
background: url("../images/bkgMAIN.jpg") repeat-y;
background-size:100% 100%;
}
It looks like that image (with the cool gradient) isn't stretching horizontally when the page is zoomed out
Is this it?
I did the following:
html, body {
width: 100%;
display: table;
}
And it removed the weird whitespacing while also allowing to scroll in the x-direction.
I usually fix it with
html {
overflow-x:hidden;
}
It should work and hide the white space and rescale the site
Tried
html {
overflow-x:hidden;
}
didn't work. But..
body {
overflow-x:hidden;
}
Did.
Related
I'm SURE there is a stupid easy answer to this, but I'm just learning to code and I can't figure out what is going on here.
http://bit.ly/1zuki3W
The images adjust to the screen size, but the page doesn't let you scroll. But the background does move.
So, how do I freeze my background image (that may just be a bounce back in Apples OS?)?
And, how do I get the ability to scroll?
remove the position fixed attribute from the body css like
body {
background: url(pictures/Backgroundtest.jpg);
/* position: fixed; remove this attribute */
font: Palatino;
margin-left: 30px;
margin-right: 30px;
overflow: auto;
}
You should only remove the position:fixed from the body
Thanks!
http://mistcave.com/temp/
Zoom into the page and scroll right. The 1px black border at the bottom of the header is cut off a bit short. How do I fix this issue?
put the border bottom property in your header div
also to note if you are using google chrome you can go to select elements and view the dimensions of each div which will help you trouble shoot in the future
Made a dirty hack. Tough it work flawlessly.
Demo Fiddle
#wrap {
width: 100%;
}
#header {
border-bottom: 1px solid #000000;
margin-bottom: -1px;
}
That doesn't really matter. Because the Border-bottom effect follows the size of your browser. No web users would zoom in and out pages except you.
It will also be fine in every screensize, just don't zoom it in and out.
That thing is fine every site has that problem too but it's not a big deal.
set the width of the #wrap in CSS to be 100%
OR simply do the following:
body
{
overflow-x: hidden;
}
.extendfull, .extendleft
{
padding-left: 3000px;
margin-left: -3000px;
}
.extendfull, .extendright
{
padding-right: 3000px;
margin-right: -3000px;
}
overflow-x: hidden prevents horizontal scrolling, and increasing the padding is pretty self explanatory.
I'm building a site with a 1700px wide JS slideshow at the top. When I publish the page, I get horizontal scrollbars since my monitor is on a 1024px resolution. How do I get the site to be centered in the browser with no horizontal scrollbars - and whatever is superfluous on either side simply isn't visible to the user?
Help GREATLY appreciated, thanks!!!
Simple solution:
body { overflow-x: hidden; }
But this will also stop people scrolling if their monitor is smaller than the main width of your site.
The real solution is to simply not have it be 1700px wide all the time. Something like the following may help, but it depends on your HTML and how your slideshow is implemented.
#slideshow { width: 100%; max-width: 1700px; }
I haven't tested this, but you may be able to get away with putting the above CSS on a container element, something like this:
#slideshow-container { width: 100%; max-width: 1700px; }
#slideshow { width: 1700px; margin: 0 auto; }
You can do this pretty easily. jsFiddle example.
As you know the size of the div, use that:
div.slideshow {
position:absolute;
padding-left:50%;
margin-left:-850px; /* 1700/2 */
}
Hi all
I have 3 divs with rollover images inside them stacked vertically inside my main content div. IE7 is chopping off about three quarters of the bottom div and I can't figure out why. It displays perfectly in all other browsers (even IE6) but IE7 just won't display properly.
This is my first website so I still have a lot to learn. I've managed to fix the other IE bugs but just can't figure this one out. Any help appreciated!
.main_content {
float: left;
width: 816px;
background-image: url(Images/evokedesign_bg_tile.png);
background-repeat: repeat-y;
overflow: hidden;
}
.portfolio_buttons {
float: left;
width: 634px;
}
Site link: http://evokedesignstudio.com.au/Portfolio.html
Now you posted a link to your live site, I found the answer very quickly:
On .gallery, remove the height: 400px rule.
Done.
This fixes IE7, and nothing changes in IE8/other browsers.
You have got your .page_container set to a fixed height of 730px.
Try updating the CSS to
.page_container {
padding: 0px;
min-height: 730px;
height:730px;
}
Same with the .gallery as #thirtydot said. Either remove the height all together or update it to min-height and height below (see above example).
By placing the height below the min-height in your stylesheet, any browser that doesn't recognise the min-height tag (IE6) will then register the height below it as a backup.
I am using the following bits of code to keep my menu items fixed while allowing for the scrolling of content because it seems to be the most stable method across all browsers.
body { overflow: hidden; }
div.content { height: 100%; overflow: auto; }
My problem is simple, and yet I can not seem to figure it out, the content inside the tag butts up against the scrollbar for the div area and it makes reading much more difficult. How can I get a margin between them (apart from floating a transparent image to the right to create space, there HAS to be a better way)?
div.content { height: 100%; overflow: auto; margin:0 15px }
I might have misunderstood you though, post some HTML if I have.