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*/
}
Related
Hoping that the community will be able to help me out here as I really am stuck. I've having 3 I issues with my website:
Website Link
For some odd reason - I can't get my columns to line up straight. The entire page seems to be more to the right than in the centre on both desktop and mobile
What I'm trying to do with the top image is have it take up the entire page upon loading, and then as you scroll, the image disappears. For some reason, on mobile, the image doesn't cut off and allows for the user to scroll to the right.
On mobile, I can't get the top image to show properly. It stretches vertically, and users have to scroll all the way past the photo to get to my content... I want the main image to resize like it does on a desktop browser and only take up the screen real estate when the page loads
Any advice here would be helpful...
In your projects sections - if that is where your issue is has padding on a UL tag - which is causing it to look misaligned.
You could do this to fix that section:
ul.skillssection {
padding-left: 0;
}
It'll be more helpful for the community if you made points or set up a jsfiddle.
Update - answer for number 2.
I can't seem to replicate it but I've noticed you've got:
img.bg {
min-height: 100%;
width: 100%;
min-width: 780px;
overflow: hidden;
}
I would change it to:
img.bg {
min-height: 100%;
max-width: 100%;
overflow: hidden;
}
So the max-width is always 100% and it should follow the width of the parent.
I have a responsive site I am working on. It has a gap of white space on the right side of the screen at screen sizes roughly below 767px. This is the point it goes to the "mobile" layout. I had the same issue on the desktop size and fixed it by setting the footer to 99% width and it fixed the issue on the larger screen sizes. I tried playing with the footer width for the mobile size, but with no luck.
I have not idea what is causing this white space on the right side of the screen on smaller viewports. I tried the inspect tool in the console, but I couldn't find the problem.
I would post code, but seeing as I can't track the problem down, I wouldn't know what to post.
URL of page: http://sevenclanscasino.designangler.com/warroad/warroad-home
For anyone with a similar issue and struggling by hovering over elements in devtools, I came across this trick on another forum.
* { border: 1px solid red !important; }
This very very helpfully shows you all the boundaries in your project. In my case it was a grid overflowing its parent. Enjoy!
Try to change some elements into your css.
.row { margin-left: 0; margin-right: 0; }
header #top-nav-container #top-nav { width: 100%; }
header #top-nav-container #top-nav { margin-left: 0; }
another way (but please dont do that) :
body { overflow: hidden; }
When working on a responsive website, you should always set width values in % rather than px. So try setting with:100%
Hope this helps.
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
I'm making a website with a large image at the top that extends past the far right of the page. The problem is that the browser keeps adding a horizontal scroll bar to allow the user to scroll to the end of this image but I don;t want it to do that.
Is there any way I can tell the browser to treat the image a bit like a background image or to simply stop scrolling after 940px?
http://www.electric-drumkit.com/404.php
There's an example of the page so you can get a better idea of what I mean.
The way to do it here is to:
Add a new div (or other relevant HTML5 tag if you prefer): <div id="wrapper">, containing everything inside body.
Move these rules from body to #wrapper:
margin: 0 auto;
position: relative;
width: 960px;
Add this new CSS:
body {
min-width: 960px;
overflow: hidden;
}
Add this to get horizontal scrolling back when the window is less than 960px wide:
html {
overflow: auto;
}
Here's a live demo so you can quickly see if my answer will have the desired effect.
Tested in Firefox, Chrome, IE8.
Put the image into a div like this:
<div class="image"></div>
And in CSS you can write:
.image {background: url(http://www.electric-drumkit.com/_images/_feat/404.png) bottom right no-repeat; height: 314px;}
In this way, your div will render the image as a background, into a div, and i think there will be no scrolling.
So i have an image in stuck to the top of my page that repeats all the way across the top. For some reason when I resize the window and then scroll over to the right it stops repeating. The div is the first in the document outside of the wrapper. Any ideas?
#header {
background-image:url('http://daveywhitney.com/img/paperhead.png');
background-repeat: repeat-x;
width: 100%;
height: 145px;
margin:0 0 20px 0;
}
This seems to work fine in FireFox. Check the width of the parent element when you resize the window.
The available benchmarks as set by your code are:-
width - 100% (so full width of the image is taken into consideration)
"background repeat - x" - Image will repeat horizontally
Internally, say the width of the image be 250px & the width of your full browser screen be 1024px. So technically, the image will repeat horizontally at least 5 times, with 4 times in full size & the last one will be shown a little bit.
Now, if you resize the browser or view the same web page in a pop-up window, your browser screen is bound to have its width modified. Let's say that now your browser screen width is 220px. As the image width is greater than the browser screen width (in this particular test case), so the image will not repeat at all, & you will also not be able to see the full image.
It's not that there is any bug, it's just the logical part, which we need to understand.
Hope it helps.
It's hard to tell from the details you have provided but here is a answer that might do the trick. Add the following
#header {
background-image:url('http://daveywhitney.com/img/paperhead.png');
background-repeat: repeat-x;
width: 100%;
height: 145px;
margin:0 0 20px 0;
overflow:hidden;
position:relative}
#wrapper {width:960px;margin:0 auto;position:relative}
You need to add a min-width to be slightly larger than your main content.