Okay so usually I can fix this myself but I'm stuck. I have been trying and trying and I just can't get my website to stay normal when I am resizing the browser window. I added a div that holds everything inside it and named it "bodycontainer". Here's my website: http://avosinc.com/new/
Here's the style I have for it:
#bodycontainer {
margin: 0;
min-height: 300px;
padding: 0;
width: 1000px;
}
And still, it doesn't want to stay put.
Please help me out!
your using px they are not responsive just static.. try using % as that will scale down with it.
#bodycontainer {
margin: 0;
height: 100%;
padding: 0;
width: 100%;
}
Related
I'm using bootstrap grid system,
While I'm scrolling to the right side of the window a white space appears:
I defined the body on width: 100vw;
How can I remove this space?
Even though we don't have any of your code, I can make a small guess. I had this problem before and this seemed to fix my problem. Try it out.
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
On my homepage, I'm trying to make three images span the entire width of the browser window. See my site here: http://accelfoods.com. I want the last 3 images on the page (About AccelFoods, Industry Engagement, Portfolio Companies) to be the same width as the image directly under the navigation.
I've figured out how to control #page-body and can make the image go to the edge of the left side (like this: http://imgur.com/gfXPyPK). But I don't know how to make the white space on the right disappear.
I've commented this CSS out for now until I figure it out, but here's what I'm using to manipulate the images:
#page-body {
margin-left: 0px;
padding-right: 0px;
border-right: 0px;
margin-right: 0px;
overflow-x:hidden;
width: 100%;
}
Any help would be greatly appreciated, thanks!
first of all, remove "max-size" parameter from:
#banner-area, #page-body, #page-footer{
width: auto;
}
then add this:
.sqs-block-content {
width: 100%;
}
.image-block-outer-wrapper.layout-caption-hidden {
display: block;
float: left;
position: relative;
width: 100%;
}
.sqs-block-image .intrinsic {
display: block;
float: left;
margin: auto;
max-width: none !important;
position: relative;
width: 100% !important;
}
but there's also script adding a strict width for this intrinsic class, I cannot see that from the first glance, it's kind of encription there and it will take time to understand it... though, the suggestion I'm giving you here definitely overrides the script.
P.S.
I would reccomend you not to use this kind of sitebuilder(s) (you definitely use some kind of) - because there's pretty tough class generator and if you need further updates there -you'll get pretty much more troubles.
When viewing my client's site on a smartphone (https://50965.thankyou4caring.org/), the white background div doesn't stretch down the full length of the page.
Even when viewing the page in Google Chrome's inspect tool emulating a smartphone, I see the same problems.
The Div IDs in question are wrapContentOuter and wrapContentInner
I've read that using the following code should work:
body, html{
height:100%;
}
However, after testing it out in several of the stylesheets linked to the page, I've been unable to find which stylesheet to apply this code to and make it work. I've removed all tests and the CSS remains as it was when I started this job.
Am I missing something? Any advice or help is greatly appreciated! Thanks in advance, and please let me know if I'm missing any details.
Try this kind of code : http://jsfiddle.net/nyitsol/8abj8sLL/
The footer will always go down.
I can see you are using a min-height for the #contentPrimary which you don't need.
#contentPrimary {
float: right;
width: 650px;
margin: 0;
min-height: 400px;
}
The min-height should be 100%
EDIT:
Try this code now, just replace the class with this css.
#wrapFooter .gutter {
padding: 0;
width: 980px;
margin: 0 auto;
}
/*sticky footer*/
#wrapFooter {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
/*No Background Color Need*/
#BodyId, #internal {
/* background-color: #7B7670!important; */
}
I have very simple html page with looong (~8000px width) horizontal panorama image.
The image is set in css as a background background-image:url('long_jpg.jpg');.
I need just to have a scrollbar at the bottom of the page to be able just to scroll the whole background image.
How can do that with css? Can you please give any working example?
check this working example http://jsfiddle.net/a9QvT/1/
.panorama
{
width: 1280px;
height: 1024px;
background-image: url(http://www.designmyprofile.com/images/graphics/backgrounds/background0188.jpg);
}
One way is to set the body width to the same width as the image
body {
width:8000px;
}
If you have any other content, you want to encapsulate all that in a div, so that the content doesn't shatter across 8000px as well.
Is there any reason you can't do this?
HTML:
<body>
<img src="picture.jpg" class="bgpic" />
</body>
CSS:
body
{
margin: 0;
padding: 0;
width: 8000px;
height: 100%;
}
.bgpic
{
width: 100%;
height: 100%;
}
Just like this...
body {
margin: 0px; padding: 0px;
background-image: url('long_jpg.jpg');
min-width: 8000px;
height: 100%;
}
but a quick warning, in terms of design and layout, people are used to pages which scroll up and down, asking them to scroll side to side will seem pretty annoting to most people. Unless you use some anchor tags and they can just click their way to specific points on the page without having the drag the scroll bar.
I am working on a website for client / design studio, there was strange issue where I found that despite having body and html elements set to width 100% and when I resize browser, the scrollbar appears forcing me to scroll the right only to find there is a gap on the right side in about 150pixels. The body element container () sets itself to fixed width of 1240px when the browser is resized but still leave the gap on the right side.
Here is css code for body element.
body {
min-width: 1200px;
max-width: 100%;
left: 0px;
right: 0px;
width: auto !important;
margin: 0 auto;
padding: 0;
background: url('images/bg-repeat2.jpg') repeat;
line-height: 1;
font: 'BitstreamVeraSerifRoman', Arial, sans-serif;
}
here is the css for html element:
html {
margin: 0 auto;
padding: 0;
width: 100%;
min-width: 1200px;
left: 0px;
right: 0px;
}
I am not using "overflow-x: hidden;" property due to concerns in the need for scrolling in smaller screens and mobile devices as well. Please note that this site is desktop version.
I would appreciate if anyone in this community can assist by providing solution or fix.
Thanks.
Youre problem seems to be min-width:1200px; remove that, and it will resolve the mandatory horizontal scroll. If you want 100% width do it like this:
html, body {
width:100%;
}
I dont think you need more then that width wise, for html and body. if you do, explain why or post a pic what you need pls.