HTML, CSS - Blank space when resized window - html

Please refer to my site: http://www.vault-x.com
With the window maximized the website appears normal.
When the window is reduced in width you are able to scroll left/right, a blank space appears on the right side of the website and I cannot figure out why?
Does anyone have a solution?

set minimum-width it will be work fine
example css
header {
height: 303px;
min-width:950px;
background: url('images/head_bg.jpg') center no-repeat,
url('images/head_liq_bg.jpg') left top repeat;
text-align: center;
}

Related

Problems positioning/resizing background image

I'm currently having difficulties in the header to resize/position a div with a background image.I did some google searches, but nothing really helped me..
The header has a logo, which is in a div called "header-left-section". On the top right of the logo, there is a navigation menu aligned within a div called "header-right-section". Those divs were already present in the theme.
We now wanted an image below the navigation menu and also on the right side of the logo. For that, I created a div tag "bottom-header-section" and set the image as the background image. Now I read several topics, that the background image doesnt show if there isnt a height and width set to it because therefor the div wouldnt have a size.
Now my problem is, that as soon as I make my browser window smaller, the div with the background image is set bellow the logo and menu, which I dont want at all.
This is my divs css code:
#bottom-header-section {
background-image: url('website/wertesystem/wp-content/uploads/2018/10/title-new.png');
float:left;
height: 120px;
width: 800px;
margin: inherit;
background-position: right bottom;
background-repeat: no-repeat;
}
With my understanding, now that I set the height to 120px and the width to 800px, this I set a fixed size to the div and as soon as I make the window smaller, the div keeps the same size but changes position because there isn't any more space on the same line as before right?
So what's the best way to align this div, on the right side of the logo and keep it responsive?
If you need a link to the website, please just tell me.
You can try to add something like this for the smaller breakpoint.
#bottom-header-section {
height: 65px;
width: 65%;
background-size: contain;
}
You might have to play with the height and width as it gets smaller.

White space to the right when the browser is resized

I'm having trouble how to fix the white space on the right side of this website.
Please, can someone help me? Here is a screenshot.
and here is the site http://ottserby.lr-dev.com/ TIA
Here is the code that you apply style in your site for the header menu.I increased the width size so that it appears as a better when you resize.
.top-container-inner .header-menu {
background: transparent url("/static/images/desktop/menu-bar.gif") repeat scroll 0% 0%;
position: static;
height: 61px;
margin-bottom: 10px;
width:1189px;
margin-right: 100px;
}
Actually the image used for the menu-bar is the problem if you remove the menu-bar image it look like this as a correct one.here is a link of that image
The main thing is that a proper website means there is no scroll bar on the bottom which makes you to design your site proper for all type of screens.so keep doing

Header not 100% in width when zoomed in

This is kind of weird, and I don't know how to explain this much here. When you zoom in to my website and scroll to the right, the header part + title box is missing. This does not happen when it is zoomed out. Previously, I set the body-width to 1024px and when I zoom out the entire page zooms out to the left (which is not desired if someone has a higher screen resolution) and I prefer it to remain centered. So, I let the body fill the full width but this does not appear to do so for the top part. Not sure what is causing it.
header {
width: 100%;
body {
width: 100%;
}
See my website here and you will be able to understand.
JS fiddle here: http://jsfiddle.net/D22Jd/
Zoom in and scroll to the right to see what I meant
Adding the below code to CSS will fix your issue.
html, body {
min-width: 1024px; /*adjust as per your need*/
}

Aligning a picture to bottom right in browser window

Im trying to markup a picture to show on the bottom right corner of the webpage.
If i set the overall width of the page to 100%
and i set the picture to float right at the bottom it makes the trick perfectly but above
the mentioned picture is a bigger width picture which is around 1600px so when you open the the page in the small window browser then the floated picture is aligned but the scrollbar apears and scrolls to the full width of the page without the floated picture..
body{width:100%;}
thepicture{width: 1289px;
height: 446px;
position:relative;
float:right;}
So the second aproach: to make the body or a wrapper div fix width that is bigger than the upper picture mentioned:
body{min-width:1600px;}
Than looks great until somebody has a bigger screen than 1600px... the float ends at 1600px;
The firs solution needs to be tweaked but i cant figure it out how, some responsive floating would be great jquery maybe?
thanks in forwards
The problem is the pearl:)
Updated
May be this work:
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%
min-width: 1648px; /* the width of the longest element */
}
#bottomwrap {
/* replace with your background color */
background: url(path/to/picture) bottom right no-repeat;
width: 100%;
}
Rememer to reset body margin, padding to zero and set body height to 100%
Update:
I have update the solution for your case, modify the HTML structure, you can review here http://jsbin.com/ulatis/1/edit
It sounds like you need to use a background image here. Put the background on a 100% width div and set the background position to right bottom.
div.background{background: url('images/bg.png') no-repeat right bottom; width: 100%}
Try position: fixed; z-index: -1;, it does exactly what you're looking for. Example

Messed up absolute positioned image on my page

On this site I have an auto-resizing BG but I wanted a fixed black bar at the bottom of the page.
The site looks fine when the browser is maximized but when you scale the window down and scroll down the black bar almost completely gone and it looks messed up. It is not positioning correctly.
I have tried a few things but can't figure out a solution to this. Does anybody have any ideas how I should go about this? (Maybe I am missing 1 little thing or maybe I need to start over from scratch, either way please help!)
Note: the auto size background is in the html tag and the black bottom bar is in its own separate div tag "#black_bottom"
http://graves-incorporated.com/test_sites/gm_2012/
Just remove height:100% from #black_bottom make the absolute:position div height auto.
You have everything wrapped incorrectly I believe. Why does your <div id="black_bottom> contain everything from your wrapper to your <div id="footer_wrap">?
Ok, so I think I see what you're going for now. If my understanding is correct, you want the gradient background to extend to about 70-73px above the bottom edge of your content box, where it meets the solid gray bar which extends to the bottom of the window, or just below that bottom circular G emblem, whichever is lower. I've accomplished this by removing the #black_bottom element entirely, setting a solid gray background color for the html element to match the color of your bottom bar graphic, and applied the circular gradient background to the body element. I've also removed the explicitly-defined height from #wrapper, and given it a negative margin-bottom to allow the black bar to underlap it. The styles I replaced are listed below. Hopefully this is closer to what you're after:
html {
background: #333;
}
body {
background: url(http://graves-incorporated.com/test_sites/gm_2012/images/bg.jpg) no-repeat center center fixed;
background-size: cover;
height: 100%;
}
#wrapper {
width: 960px;
margin: 0 auto -136px;
top: 20px;
position: relative;
}