I have designed a responsive website but whenever I view the site when the display width is smaller than 510px wide eg. iPhone or shrinked browser the content works as it should and compresses to the width of the browser but there is a big white space to the right and the user and scroll horizontally.
I find this unusual as there is no media queries for 510px width, just 390px, 700px, 850px, 906px and 960px. Below is a screenshot of what is happening.
Thanks.
You need to remove width:500px; on <h1> elements.
see this FIDDLE
Related
I have a footer styled for my Wordpress site, which is not appearing to reach the full width of the site on mobile. Also, I am always able to scroll width ways, as if the site is wider than the mobile viewport. This only happens on mobile portrait, not on desktop or tablet.
I have all widths set to 100% (the header, the body, the footer and several others) but it seems the footer width renders as 1333px width whereas the header and body widths render as 1349px (as in inspect dev tools on laptop).
I have no fixed widths for any elements set in pixels of over 300px.
The footer is placed outside of the main and the main container but within the body.
I don't think any of the elements within the footer are the problem, as I have removed them and replaced them but the same problem still exists.
Photo included: Gap to right of footer
This problem maybe because one of your HTML tags on the entire webpage (out of the footer) is bigger then the screen
This problem not from the footer,please check the other parts of the webpage
Hi Hazem and thank you for your reply again. Update: I now know what was causing this problem. A left margin set in pixels on my content div that was set to 80% width was adding to the gap to the right of the footer, but only on mobile view. I then realised that my media queries were not working but I have now sorted that out, hence I have sorted the problem.
Thank you for your help.
I have a website that is responsive and when you scale the site down. The site looks good, but if you scroll to the right there is a blank space because the nav-bar is 1000px wide.
When the site is sclaed down to tablet or phone the nav folds into a special mobile nav but the div from the larger site still remains.
My question is what can I do to make that div scale down with the rest of the site?
You'll see what I mean if you look at the site.
Glacialpace.com
use % for the navbar unit instead of pixels this will allow it to also scale down with the site. also remember to add auto margin to the right and left of the navbar
I want to when screen resolution less eg. 960px, left and right sidebar don't move down, below content div. On 960px width resolution, content div is width 100%, I don't want this, I want to all reduce proportionately and right and left sidebar stay in the same place how can see on bigger resolution.
check your style.css file. there must be css media queries for that. If you can show me the code I can help you.Cant help without see anything.
I'm using http://www.cssstickyfooter.com/ for the footer of two sites I'm working on. Seems to be fine on a large monitor, no issues at all.
However when going to a smaller monitor and shrinking the page size down I'm getting a scroll bar at the bottom of the screen and the Footer is not stretching the full width of the screen.
A working example of this issue is here
Just shrink the screen size down and you can see the issue.
Any ideas on how I can fix this. It has also happened on this site I've made
Thanks in advance.
You need to set a min-width for your footer. Currently the footer is correctly adjusting itself to the size of your screen, even if the rest of the content no longer fits on the screen and scrollbars are added.
Find the width at which scrollbars appear and set your footer's min-width to that. Example:
.footer {
min-width: 1000px;
}
I have a background-image used to separate my page footer from the main content. It displays fine when viewed in a browser window wider than the supported min-width of the page. However, if the window is resized to be narrower the image is pushed to the right relative to the main body.
How it displays in wide browser windows:
How it displays in narrow browser windows:
Can I set the main body content not to push right up against the left-hand side of the window, but rather keep the 30 pixel margin when viewed in a narrow browser window?
The page is live here if the CSS will be helpful.
Yes, you should give the <body> a min-width. Just a little above 1000 works for me on your website, but I don't have an exact value. Probably the exact width of the ribbon.
-edit-
ribbon (1000px) + border (2 * 1px) = 1002px, that should do it.
The problem is that your #footerTop and #footer are too big and are responding to the window shrink. The way I would get around this is by adding the background to the #footerContainer instead. If you align it to the centre it will always work since #footerContainer does not have a fixed width.
This will also mean that you won't get the horizontal scroll bar when the browser window is resized to 999px wide. It all depends on how small you want the window to be able to go